HTML嵌入页面的和主页面的之间的元素和方法调用(iframe)

  时间:2019-01-11
本文章向大家介绍HTML嵌入页面的和主页面的之间的元素和方法调用(iframe),主要包括HTML嵌入页面的和主页面的之间的元素和方法调用(iframe)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在使用iframe时,可以在页面中嵌入一个子页面,通过点击主页面的按钮切换不同的子页面。

那如果想点击子页面的按钮,切换主页面的显示效果,需要怎么做呢。

  父调子 子调父
元素 window.frames[iframe的name属性值]; ① window.parent.document.getElementById("父页面元素ID");
②window.parent.document.getElementsByTagName("父页面元素标签名")[i];
③window.parent.document.getElementsByClassName("父页面元素类名")[i];
方法 ① document.getElementById("子页面元素ID").contentWindow.子页面方法名;
② document.getElementsByTagName("子页面元素标签名")[i].contentWindow.子页面方法名;
③ document.getElementsByClassName("子页面元素类名")[i].contentWindow.子页面方法名;
window.parent.父页面方法;

贴一段示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../css/main.css" rel="stylesheet" type="text/css"/>

    <script language=javascript>
        function change(){
            var str="<a href='http://localhost:63342/ChengGuanJS/html/streetlist.html'>返回</a>";
            <!--更新父页面中 id是search的元素内代码-->
            window.parent.document.getElementById("search").innerHTML=str;
        }
    </script>
</head>
<body>
    <div>
        <!--点击下面这个div时,会使用方法change(),-->
        <div class="cardBox" onclick="change()">
            <div class="headerBox" id="road1" style="background-color: #4caf50;">
                <p>
                    <a title="链接跳转" style="cursor: pointer; color:white"  href="http://localhost:63342/ChengGuanJS/html/lanelist.html">双井</a>
                </p>
            </div>
        </div>
    </div>
</body>
</html>

 

上一页 下一页

原文地址:http://www.manongjc.com/article/42474.html