早睡早起,方能养生
Sleep early rise early, way to keep healthy

Html5 iframe子页面与父页面js方法相互调用

super
2022-01-20 16:00
views 2194

父页面

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe父页面与子页面传值,方法调用</title>
</head>
<body>
    <button onclick="giveValueToSonPage();">向子页面传值</button>
    <iframe src="son.html" id="son_page" frameborder="1"></iframe>
</body>
<script>

    /**
     * 给子页面传值
     */
    function giveValueToSonPage() {
        let value = 1;
        document.getElementById("son_page").contentWindow.sonPageFunction(value);
    }

    /**
     * 父页面的方法,由子页面调用
     */
    function parentPageFunction(value) {
        alert('这里是父页面,子页面传的值:' + value);
    }

</script>
</html>

 

子页面

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子页面</title>
</head>
<body>
<button onclick="giveValueToParentPage();">向父页面传值</button>
</body>
<script>

    /**
     * 给父页面传值
     */
    function giveValueToParentPage() {
        let value = 2;
        window.parent.parentPageFunction(value);
    }

    /**
     * 子页面的方法,由父页面调用
     */
    function sonPageFunction(value) {
        alert('这里是子页面的方法,父页面传来的值为' + value);
    }

</script>
</html>


分享
0 条讨论
top