CODEWITHSUNDEEP
javascripthtml
Adam Smith
Adam Smith

Reputation: 35

how to writing to text box inside an iframe

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?

Upvotes: 2

Views: 5181

Answers (3)

Tomas Ramirez Sarduy
Tomas Ramirez Sarduy

Reputation: 17471

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!

Upvotes: 2

Jehanzeb.Malik
Jehanzeb.Malik

Reputation: 3390

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');

Upvotes: 1

Danny Beckett
Danny Beckett

Reputation: 20766

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

Upvotes: 0

Related Questions