zoukankan      html  css  js  c++  java
  • iframe父子页面跨域通讯demo

    A页面:

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>A页面</title>
    <script type="text/javascript">
    function Afun()
    {
        alert('我是A页面的函数');
    }
    </script>
    </head>
    <body>
        <div>
            
          <h1>我是A页面</h1>
          <div>
          使用说明:
          <p>配置host 127.0.0.1   parent.hc360.com</p>
          <p>配置host 127.0.0.1   child.hc360.com</p>
          </div>
             <iframe id="frameB" src="http://child.hc360.com/iframe/B.html" width="650px"; height="500px";></iframe>
        </div>
      
    </body>
    </html>

    B页面:

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>B页面</title>
    </head>
    <body bgcolor="#CCCCCC"> 
        <div>
            <h1>我是B页面</h1>
            <input id="button" type=button value="确定确定确定确定确定确定确定确定" onclick="send()"/>
        </div>
           <p><iframe id="frameC" name="frameC" src="" width="300px";height="30px";></iframe></p>
        
    </body>
    </html>
    <script type="text/javascript">
    function send(){
        frameC.location.href="http://parent.hc360.com/iframe/C.html";
    };
    </script>

    C页面:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>C页面</title>
    <script type="text/javascript">
        function init(){
                top.Afun();
        };
    </script>
    </head>
    <body onload="init()" bgcolor="#999999">
        <h1>我是C页面</h1>
    </body>
    </html>
  • 相关阅读:
    var、let、const
    面向女朋友自我介绍
    ES6——class
    一个错误引发的——对异步回调与for循环(小白错误,大神勿进)
    关于this
    关于作用域
    HTML5 8
    HTML5 7
    HTML5 6
    HTML5 4
  • 原文地址:https://www.cnblogs.com/zhuyang/p/2725455.html
Copyright © 2011-2022 走看看