In web development, there is often a problem. I have embedded IFRAME on a page and want to get the value of an element on this IFRAME page. How can we achieve this?
Let's take a look at the demonstration: kaishi entertainment city.
Effect demonstration
Value of the text box in iframe1:
Code for operating IFRAME content in IE:
document.frames["MyIFrame"].document.getElementById("s").style.color="blue";
However, this is invalid in Firefox. Therefore, I want to use firebug in Firefox for debugging. After debugging, you can use the following code in Firefox:
document.getElementById("MyIFrame").contentDocument.getElementById("s").style.color="blue";
DEMO code:
<Div> <IFRAME name = "frame1" id = "frame1" src = "frm.html" frameborder = "1" Height = "60"> </iframe> </div> <p> value of the text box in iframe1: <input type = "button" name = "Submit" value = "getvalue" onclick = "getvalue () "/> </P> <SCRIPT type =" text/JavaScript "> function getvalue () {var ofrm1 = document. getelementbyid ("frame1" cmd.doc ument; If (ofrm1 = undefined) {ofrm1 = document. getelementbyid ("frame1" pai.content1_doc ument; var FF = ofrm1.getelementbyid ("txt1 "). value; alert ("Firefox/chrome value Result:" + ff);} else {var Ie = document. frames ["frame1" 2.16.doc ument. getelementbyid ("txt1 "). value; alert ("ie value:" + IE) ;}</SCRIPT>
IFRAME Page code:
<HTML>
Obtains the value of an element on an IFRAME page.