html中父页面提供方法给子页面调用,子页面直接通过方法名调用

114 阅读1分钟

父页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        盒子
        <p>
            <iframe src="11.html" id="iframe"></iframe>
        </p> 
    </div>
    <script>
        var nameO = '1.html';
        function m(){
            console.log(nameO);
        }
        var iframe = document.getElementById('iframe');
        iframe.contentWindow.m = m; // 强制给iframe绑定函数
        // console.log(iframe.contentWindow);
    </script>
</body>
</html>

子页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    iframe
    <script>
        m();
    </script>
</body>
</html>

注意点: 会有函数重复定义异常的情况发生,需要注意避免一下

相关扩展: contentWindow 属性返回当前HTMLIFrameElement的Window对象。你可以使用这个Window 对象去访问这个 iframe 的文档和它内部的 DOM. 这个是可读属性,但是它的属性像全局Window 一样是可以操作的。