how to writing to text box inside an iframe

Question

I have a main.html, inside it is <ifram id='if' name='if'>, which loads another site (this loads a site not in my domain, like Facebook).

The site which is loaded in the iframe has <form name='form2' id='form2'>, and in it there's <input type='text' name='tb' id='tb'>

Also in main.html, I have a button and I was wondering if we could place some Javascript on the button so that when we click it, the text in textbox named tb changes to say 'az'.

How can we do this?

Tomas Ramirez Sarduy · Accepted Answer · 2013-02-06T08:56:50.240

2

You can' do that because that would be cross-site scripting, which is prohibited for security reasons. You could use a proxy, feed the HTML in the iframe through your own site so it's no longer cross-site from the browser's perspective.

If the <iframe> is from the same domain, the elements are easily accessible as:

$("#iFrame").contents().find("#someDiv")

Test: http://jsfiddle.net/Yy6tu/ press Ctrl+Shift+j and see what you got!

UPDATE: In case you have the a other.html file on your same folder, you can do this:

main.html:

<head>
    $('document').ready(function(){
        $("#if").contents().find("#b").val('lalalala');
    });
</head>

<body>
    <input type='button' name='executer' value="Maro">
    <iframe width="600" height="400" src='other.html' name='if' id="if"></iframe>
</body>

other.html:

<form action="x" name="form2" id="form2"> 
     <input type="text" name="tb" id="b">
</form>

That should work!

edited Feb 06 '13 at 08:56

answered Feb 06 '13 at 07:19

Tomas Ramirez Sarduy

17,294
8
69
85

Thanx @Tom Sarduy , so can we get location/source_code of iframe from parent which loads site from different domain :)? – Adam Smith Feb 06 '13 at 07:24
And @Tom , i cant get your syntax to work.In my example i put $("if").contents().find("tb").value='fd' this in a buttons(in parent) onClick param , but it doesnt works ? – Adam Smith Feb 06 '13 at 07:27
1

@AdamSmith: because the `iframe` is loaded from external site (Read carefully the answer) – Tomas Ramirez Sarduy Feb 06 '13 at 07:31
And sorry i cant vote up now (will do later:)) as i dont have 15 reputation now :) – Adam Smith Feb 06 '13 at 07:33
@AdamSmith: In that case your syntax is wrong: use this: `$("if").contents().find("#tb").val('#fd')` PD. Don't worry about the upvote ;) – Tomas Ramirez Sarduy Feb 06 '13 at 07:34
still not working dude :) Here's content of main.html :- ' ' And heres the content of 2.html :- '

' – Adam Smith Feb 06 '13 at 07:44
@AdamSmith: Oh my... you are opening and closing the `iframe` with no content inside. And put the jQuery in `main.html`. Now is a different question, use the search input my friend. – Tomas Ramirez Sarduy Feb 06 '13 at 08:00
Hey i couldnt get a word of what you said , can you show the edited part :) And thanks bro for extending constant support :) – Adam Smith Feb 06 '13 at 08:34
@AdamSmith: You need to put `` after `` – Tomas Ramirez Sarduy Feb 06 '13 at 08:36
Now the button is not visible :D Google Chrome. – Adam Smith Feb 06 '13 at 08:39

score 1 · Answer 2 · edited May 23 '17 at 12:24

1

That my friend is not possible. Cross-domain protection although limits some features but is of great advantage.

StackOverflow

This might help:

http://msdn.microsoft.com/en-us/library/bb735305.aspx

A possible solution would be to re-load the iframe. And add the text value as a param in iframe's url query string. But that would be a far-fetched solution.

Another possible solution would be to use an intermediary iframe or otherwise known as proxy iframe. This might help:

http://www.tomslabs.com/index.php/2012/06/iframes-and-javascript-cross-domain-security/

EDIT:

If iframe is on same domain as page than this should work.

$('#if').contents().find('#b').val('fd');

edited May 23 '17 at 12:24

Community

1
1

answered Feb 06 '13 at 07:20

Jehanzeb.Malik

3,332
4
25
41

This could also help: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe – Tomas Ramirez Sarduy Feb 06 '13 at 07:24
Thanx for your alternative @Jehanzeb.Malik :) And can how can we get location/source_code of iframe from parent which loads site from different domain :)? – Adam Smith Feb 06 '13 at 07:28
1

@AdamSmith Read my lips carefully: Same origin policy. – Danny Beckett Feb 06 '13 at 07:36
@AdamSmith The solution that I was suggesting would only work if both the sites are developed by you. Then you can catch the url query string param and use it accordingly inside iframe. But as you mentioned that you would be opening other sites like facebook (which you dont have control of), this solution won't work. But if you are able to proxy the iframe you can make it work. But I will say only implement it if really necessary. – Jehanzeb.Malik Feb 06 '13 at 07:36
If you dont know how to proxy iframe this might help. http://www.tomslabs.com/index.php/2012/06/iframes-and-javascript-cross-domain-security/ – Jehanzeb.Malik Feb 06 '13 at 07:37
Okay let me check the link And yeah both site is developed by me & are in same domain,same folder now. – Adam Smith Feb 06 '13 at 07:45
1

Well you should have clearly mentioned that you are loading page from same domain. Loading facebook is not loading from same domain. If both pages are on same domain than this should suffice `$('#if').contents().find('#b').val('fd');` – Jehanzeb.Malik Feb 06 '13 at 08:00
1

@DannyBeckett : Okay maybe i should ask updated question as new question :) – Adam Smith Feb 06 '13 at 08:36

score 0 · Answer 3 · answered Feb 06 '13 at 07:16

0

This is strictly not possible, since it directly violates same origin policy.

answered Feb 06 '13 at 07:16

Danny Beckett

20,529
24
107
134

Thanx Danny , can we get location/source_code of iframe from parent which loads site from different domain :)? – Adam Smith Feb 06 '13 at 07:30
@AdamSmith No, same problem with same origin policy. – Danny Beckett Feb 06 '13 at 07:35

how to writing to text box inside an iframe

3 Answers3