How to get the text within an text field which is inside an iframe if cross domain?

Question

I have a form in which I have taken one text field and also called an iframe inside it and in that iframe there is a text field for Name. I want to show that Name into my forms text field on key-up using JavaScript/jQuery. I mean as well as I have entered something into the Name text field it will show into my input field.
See the attached image I want to display name from iframe in <code>Name</code> input field within form

I am calling the iframe from another domain.I have used below code

<script> 
var iframe = document.getElementById('progressive');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
var usernameTextBox = innerDoc.getElementById('ApplicantInfo1_FirstName');
usernameTextBox.focus();
</script>

score 1 · Answer 1 · edited May 23 '17 at 11:43

In your parent page, do you control the domain name? If so, create a sub-domain. Let's say your parent page is called example.com, then create a subdomain iframe.example.com

In your parent page, you need then just set

document.domain = "example.com";

The subdomain with then be considered a safe domain and you will be allowed to talk between the 2 pages.

There is a more extensive description of this here: Ways to circumvent the same-origin policy

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

This should work:

var windowjQuery = $('#progressive')[0].contentWindow.$;
var f = $('#progressive').contents().find('#ApplicantInfo1_FirstName');

UPDATE:

You can read more on this topic in related question, bec. I don't have possibility to setup environment for testing this particular case now.

The point is that, that you should call the <iframe> jQuery object ($), not of your parent page.

edited May 23 '17 at 11:51

Community

1
1

answered Dec 29 '12 at 10:05

Paul T. Rawkeen

3,994
3
35
51

I am getting Error: SyntaxError: syntax error Source File: file:///C:/Users/monika.m/Desktop/iframe.html Line: 30 Source Code: var windowjQuery = $('#progressive')[0].contentWindow.$; – Rash Dec 29 '12 at 10:15

Skuli Axelson · Answer 3 · 2012-12-29T10:26:35.853

I´m not sure if this works in cross domain, but you might want to check out jQuery .bind().

Here is an example for .bind()

$('#progressive').load(function() {
  $(this)
    .contents()
    .find('#ApplicantInfo1_FirstName')
    .bind('keydown', function() {
        //  do stuff
    });
});

More / better details here on W3schools and a live demo here. But those are not cross domain. Also more examples here.

Otherwise, here is an example on how to access the javascript in a child iframe from the parent:

document.getElementById('ApplicantInfo1_FirstName').contentWindow.yourfunction()

How to get the text within an text field which is inside an iframe if cross domain?

3 Answers3