1. 程式人生 > >iframe中鑲嵌html頁,並獲取html中的方法

iframe中鑲嵌html頁,並獲取html中的方法

首先建立兩個html頁

 

第一個html頁(HtmlPage1.html)

 <html>

 <head>

    <meta charset="utf-8" />     <title></title>     <script type="text/javascript">         //傳值         function GetString() {             var Str = "{\"Num\": \"" + document.getElementById("Num").value + "\"}";             return Str;         }     </script> </head> <body>     值:<input type="text" id="Num" style="width:40px;text-align:center;"> </body> </html>

 

第二個html頁(HtmlPage2.html)

<html>

<head>

    <meta charset="utf-8" />     <title></title>     <script>         window.onload = function () {             //必須先載入html頁,不然造成第一個html頁中的函式不存在

           document.getElementById("Plugin").src = "HtmlPage1.html";

        }         //點選         function Funbtn() {             var Num = document.getElementById("Plugin").contentWindow.GetString();//獲取Iframe中html頁中的方法             alert(Num);         }     </script> </head> <body>     <iframe id="Plugin" frameborder="1" noresize="noresize" name="plugin" style="width: 520px; height: 140px;"></iframe><br />     <button id="btn" onclick="Funbtn()">按鈕</button> </body> </html>