• Html5 跨域通信


    H5 跨域通信:

    在主页面中通过iframe嵌入外部页面,通过iframe的window对象postMessage方法向iframe页面传递消息。

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>跨域通信示例</title>
     6         <script type="text/javascript">
     7             function hello(){
     8                 var iframe = document.getElementById("iframe").contentWindow;
     9                 iframe.postMessage("hello, 这是主页面传过来的数据", "http://localhost/html5/b.html");
    10             }
    11         </script>
    12     </head>
    13     <body>
    14         <h1>跨域通信示例</h1>
    15         <iframe width="400" src="http://localhost/html5/b.html" onload="hello()" id="iframe">
    16         </iframe>
    17     </body>
    18 </html>
    复制代码

    iframe页面中通过对窗口对象的message事件进行监听,以获取消息。

    复制代码
     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <script type="text/javascript">
     6             window.addEventListener("message", getEvent, false);
     7             function getEvent(event){
     8                 alert("从" + event.origin + "那里传递过来的信息是:
    " + event.data);
     9             }
    10         </script>
    11     </head>
    12     <body>
    13         iframe 页面
    14     </body>
    15 </html>
    复制代码

      

    作者:qqyumidi

    出处:qqyumidi的博客--http://www.cnblogs.com/lwbqqyumidi/

    您的支持是对博主最大的鼓励,感谢您的认真阅读。

    本文版权归作者所有,欢迎转载,但请保留该声明。

  • 相关阅读:
    logback-spring.xml配置文件详解
    SpringBoot-Controller接收参数的几种常用方式
    spring boot配置定时任务设置
    SpringCloud 配置文件 application.yml和 bootstrap.yml区别
    ajax/get请求
    ajax封装2
    ajax封装1
    楼层特效
    旋转动画
    联动动画
  • 原文地址:https://www.cnblogs.com/daishuguang/p/3972005.html
Copyright © 2020-2023  润新知