在父页面内设置iframe页面内容
一、父页面代码
1. jquery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在父页面内设置iframe元素内容</title> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript"> function setIframe() { $("#iframe").contents().find("#div1").html($("#div1").html()); } </script> </head> <body> <div id="div1">This is a test</div> <iframe id="iframe" src="iframe.html"></iframe> <div><button onclick="setIframe()">设置</button></div> </body> </html> |
2. 原生
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在父页面内设置iframe元素内容</title> <script type="text/javascript"> function setIframe() { var iframe = document.getElementById("ifr1"); var iwindow = iframe.contentWindow; var idoc = iwindow.document; idoc.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML; } </script> </head> <body> <div id="div1">This is a test</div> <iframe id="ifr1" src="iframe.html"></iframe> <div><button onclick="setIframe()">设置</button></div> </body> </html> |
或者
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>在父页面内设置iframe元素内容</title> <script type="text/javascript"> function setIframe() { var iwindow = window.frames['ifr1']; var idoc = iwindow.document; idoc.getElementById("div1").innerHTML = document.getElementById("div1").innerHTML; } </script> </head> <body> <div id="div1">This is a test</div> <iframe id="ifr1" name="ifr1" src="iframe.html"></iframe> <div><button onclick="setIframe()">设置</button></div> </body> </html> |
二、iframe页面代码
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>iframe页面</title> </head> <body> <div id="div1">This is iframe</div> </body> </html> |
