javascript - Element within iframe's div not accessible in the current code -


i have 2 html files namely a.html , b.html, 1 js file namely do.js.

here each contents of each file:

a.html: 

<head>     <script src="do.js" type="text/javascript"></script> </head> <body>     <button onclick = "dowork();">click me</button>     <iframe src = "b.html" id = "previewframe"></iframe> </body>

b.html (relevant part):

<div id = "container"></div>

do.js: 

function dowork(){  var div = $('#previewframe').contents().find('#container');  div.html("<input type = 'text' id = 'testelem' value = '12'><script>alert(document.getelementbyid('testelem').value);</script>"); }

when run above code, content of iframe gets replaced text box, alert fails.

i "type error" stating document.getelementbyid... null.

can please tell me missing in above code?

you calling javascript function using document, object parent document, not document of iframe, try with:

function dowork(){  var = $('#previewframe').contents().find('body');  a.html("<input type = 'text' id = 'testelem' value = '12'><sc"+"ript>alert($('#previewframe').contents()[0].getelementbyid('testelem').value);</scr"+"ipt>"); }

see demo here.


Comments

Post a Comment