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>

猜你喜欢

转载自www.cnblogs.com/-zzc/p/9930176.html