全面相容的Iframe 與父頁面互動操作 父頁面 Father.htm 源碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>全面相容的Iframe 與父頁面互動操作</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function fatherFunction() { alert("我是父頁面的方法,\n調用成功！"); } /* *父頁面通過 iframe Name 調用子頁面的函數或者擷取子頁面元素的內容 */ function one() { var ifreame = window.frames["childPage1"]; if (ifreame != null && ifreame != undefined) { ifreame.childFunction(); } } function two() { var ifreame = window.frames["childPage1"]; if (ifreame != null && ifreame != undefined) { var myValue = ifreame.document.getElementById("childPage"); alert(myValue.innerHTML); } } /* *父頁面通過 iframe Id 調用子頁面的函數或者擷取子頁面元素的內容 */ function three() { var ifreame = window.top.document.getElementById("childPage2").contentWindow; if (ifreame != null && ifreame != undefined) { ifreame.childFunction(); } } function four() { var ifreame = window.top.document.getElementById("childPage2").contentWindow; if (ifreame != null && ifreame != undefined) { var myValue = ifreame.document.getElementById("childPage"); alert(myValue.innerHTML); } } </script></head><body style="margin: auto;"> <fieldset> <legend>父頁面通過 iframe Name 調用子頁面的函數或者擷取子頁面元素的內容</legend> <dl> <dt> <input type="button" value="通過ifrme Name 調用子頁面的指令碼" onclick="one();" /> <input type="button" value="通過ifrme Name 擷取子頁面元素的內容" onclick="two();" /> </dt> <dt> <div style="width: 100%; height: 250px;"> <iframe name="childPage1" src="Child1.htm" frameborder="0" scrolling="no" width="100%" height="250"></iframe> </div> </dt> </dl> </fieldset> <br /> <fieldset> <legend>父頁面通過 iframe Id 調用子頁面的函數或者擷取子頁面元素的內容</legend> <dl> <dt> <input type="button" value="通過ifrme Id 調用子頁面的指令碼" onclick="three();" /> <input type="button" value="通過ifrme Id 擷取子頁面元素的內容" onclick="four();" /> </dt> <dt> <div style="width: 100%; height: 250px;"> <iframe id="childPage2" src="Child2.htm" frameborder="0" scrolling="no" width="100%" height="250"></iframe> </div> </dt> </dl> </fieldset></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>全面相容的Iframe 與父頁面互動操作</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script language="javascript" type="text/javascript"> function childFunction() { alert("我是子頁面,\n我需要使用 Iframe Name 調用！"); } </script></head><body style="margin: auto; background-color: Gray; color: Red;"> <input type="button" value="調用父頁面的指令碼" onclick="javascript:window.parent.fatherFunction();" /><br /> <div id="childPage"> 我是子頁面,我需要使用 Iframe Name 調用！</div></body></html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>全面相容的Iframe 與父頁面互動操作</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" language="javascript"> function childFunction() { alert("我是 iframe 嵌入的子頁面，\n需要通過 Iframe Id 調用！"); } </script></head><body style="margin: auto; background-color: Gray; color: Red;"> <input type="button" value="調用父頁面的指令碼" onclick="javascript:window.parent.fatherFunction();" /><br /> <div id="childPage"> 我是 iframe 嵌入的子頁面，需要通過Id調用！ </div></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
