• 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>
  • 相关阅读:
    [Leetcode]279.完全平方数
    map处理数组 替换item的值
    Immutable数据详解 merge方法及其原理解释
    dev-server的mock配置
    react 国际化 react-i18next
    import * as xxx from 'xxx'
    http-server测试本地打包程序是否有问题
    git 操作
    react hook 官方文档阅读笔记
    吐槽下百度搜索引擎的权重问题
  • 原文地址:https://www.cnblogs.com/zhuyang/p/2725455.html
Copyright © 2020-2023  润新知