zoukankan      html  css  js  c++  java
  • iframe上下传递对象方法

    iframe页面和原本的页面传值方法实例,可以用于获取父页面和子页面的dom对象的值。

    parent.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Home Page For Iframe</title>
    </head>
    <body>
        <h1>This is for iframe</h1>
        <h2 id="ele">To Get it.</h2>
        <iframe src="./iframe.html" id="iframe-content" frameborder="1px">    
        </iframe>
    </body>
    </html>

    iframe.html:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>Iframe</title>
    </head>
    <body>
        <a href="./parent.html">Home Page</a>
        <br />
        <button onclick="closeiframe();">close iframe</button>
        <br />
        <button onclick="addele();">Add Element To Parent Page</button>
        <br />
        <button onclick="get_parent_ele();">Get Parent Page Ele</button>
        <script>
            function closeiframe() {
                var iframe_content = window.parent.document.getElementById("iframe-content");
                console.log(iframe_content);
                window.parent.document.body.removeChild(iframe_content);
            }
            function addele() {
                var new_title = document.createElement("h1");
                console.log(new_title);
                new_title.innerHTML = "Title For Page";
                window.parent.document.body.appendChild(new_title); 
            }
            function get_parent_ele() {
                var get_ele = window.parent.document.getElementById("ele");
                // alert(get_ele);
                alert(get_ele.innerHTML);
            }
    
        </script>
    </body>
    </html>

    在本地的Chrome浏览器无法使用,会出现安全错误。放在服务器上就行了。

  • 相关阅读:
    SQL Server 2005 出现“此数据库没有有效所有者”错误的解决方法
    使用swfupload出现SecurityError Error #2156问题
    读取Excel表
    POJ 1953 (DP)
    POJ 1050 (DP)
    POJ 1276 (DP)
    POJ 1579 (DP)
    HDOJ 4223 (DP)
    POJ 1080 (DP)
    POJ 1458 (DP)
  • 原文地址:https://www.cnblogs.com/jaw-crusher/p/3553966.html
Copyright © 2011-2022 走看看