*/

* Copyright (c) 2016，烟台大学计算机与控制工程学院

* All rights reserved.

* 文件名：text.html

* 作者：常轩

* 微信公众号：Worldhello

* 完成日期：2016年11月2日

* 版本号：V1.0

* 程序输入：无

* 程序输出：见运行结果

*/

Web 通信新技术 ——跨文档信息传输

<!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">

   <!-- <meta http-equiv="refresh" content="5">-->

<title>postMessage子页面</title>

</head>

<body>

   <div>

        <p>接受来自:</p>

        <h1 id="h1"></h1>

        <p>的消息：</p>

        <h1 id="p_text"></h1>

    </div>

    <input  id="texts" type="text" name="textss">

    <script type="text/javascript">

        // 窗口事件监听：监听message

        window.addEventListener("message",function(e){

            var sts="123";

            // e.origin:发送消息的地址，谁发的消息就是谁的

            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据

            //if( e.origin != "" ){

           //     return;

          //  }

            document.getElementById("h1").innerHTML = e.origin;

            // e.data:发消息的内容

            document.getElementById("p_text").innerHTML = e.data;

            // 接收到消息后，在回过去，回个话；

            // 通过访问message的source的属性，来获取消息发送源的窗口对象，

            // 也就是能知道是谁发的消息，在通过postMessage，给发消息者回个话

            e.source.postMessage(sts,e.origin);

        },false);

    </script>

</body>

</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">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!--    <meta http-equiv="refresh" content="5">-->

<title>postMessage主页面</title>

</head>

<body>

    <div>

        <p>接受来自:</p>

        <h1 id="h1"></h1>

        <p>的消息：</p>

        <h1 id="p_text"></h1>

    </div>

    <iframe width="500px" height="500px" id="iframe"

        src="http://1.aboutxuan.applinzi.com/test/test.html"

        onload="send()">

    </iframe>

    <script type="text/javascript">

        // 窗口事件监听：监听message

        window.addEventListener("message",function(e){

            // e.origin:发送消息的地址，谁发的消息就是谁的

            // 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据

            //if( e.origin != "http://www.aboutxuan.applinzi.com" ){

            //    return;

            //}

            document.getElementById("h1").innerHTML = e.origin;

            // e.data:发消息的内容

            document.getElementById("p_text").innerHTML = e.data;

        },false);

        // 发消息

        function send(){

            // 获取嵌入的iframe

            var iframe = window.frames[0],

                send_origin = document.getElementById("iframe").getAttribute("src");

            iframe.postMessage("我是父页面的消息",send_origin);

        }

    </script>

</body>

</html>

从自己想实现这一个功能到大体可以实现，花了点功夫。因为没有人带，所以走了些弯路。虽然现在只是有个雏形，不过还是有信心做出点东西的。加油！！！

Web 通信技术 ——跨文档信息传输(JavaScript)的更多相关文章

  1. web通信之跨文档通信 postMessage

    index.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

  2. HTML5跨文档消息传递

    HTML5定义了一些javascript API,其中有一个就是跨文档消息传递(cross-document-messaging简称XDM). 现在XDM已经作为一个规范独立了出来,名字为:Web M ...

  3. 通过Html5的postMessage和onMessage方法实现跨域跨文档请求访问

    在项目中有应用到不同的子项目,通过不同的二级域名实现相互调用功能.其中一个功能是将播放器作为单独的二级域名的请求接口,其他项目必须根据该二级域名调用播放器.最近需要实现视频播放完毕后的事件触发,调用父 ...

  4. 跨文档消息传递----postMessage()

    HTML5 规范中,提出了XDM,又称为 跨文档消息传递,其核心是 postMessage()方法,进行跨域和跨文档消息传递,示例如下: <div class="CrossDocume ...

  5. HTML（六）HTML iframe 使用postMessage方法进行跨文档消息传递

    什么是iframe HTML内联框架元素 <iframe> 表示嵌套的浏览上下文,有效地将另一个HTML页面嵌入到当前页面中. <iframe id="inlineFram ...

  6. HTML5实战与剖析之跨文档消息传递(iframe传递信息)

    在来自不同域名的页面间传递消息一般统称为跨文档消息传送,简称XDM.如,www.leemagnum.com域中的页面与位于一个内嵌框架中的http://blog.csdn.net/lee_magnum ...

  7. HTML5 跨文档消息传输

    对窗口对象的message事件进行监听 window.addEventListener("message", function(event) { // 处理程序代码 }, fals ...

  8. Web页面引入文档编辑器报风险

    Web页面引入文档编辑器会报风险,则需要以下操作: <system.web> <httpRuntime requestValidationMode="2.0" / ...

  9. HTML5中的跨文档消息传递

    跨文档消息传送(cross-document messaging),有时候也简称为XDM,指的是来自不同域的页面间传递消息.例如,www.w3cmm.com域中的一个页面与一个位于内嵌框架中的p2p. ...

随机推荐

  1. Java Web实现用户登录界面

    一.学习Java Web需要的技术: Java语言基础:算法基础.常用数据结构.编程规范. 掌握常见的数据结构和实用算法:培养良好的编程习惯. Java面向对象:封装.继承.多态等,面向对象程序设计, ...

  2. 微服务监控druid sql

    参考该文档 保存druid的监控记录 把日志保存的关系数据数据库(mysql,oracle等) 或者nosql数据库(redis,芒果db等) 保存的时候可以增加微服务名称标识好知道是哪个微服务的sq ...

  3. POJ-3264 Balanced Lineup（区间最值，线段树，RMQ）

    http://poj.org/problem?id=3264 Time Limit: 5000MS     Memory Limit: 65536K Description For the daily ...

  4. 系统学习Javaweb8----JavaScript4（结束）

    学习内容: 1.DOM对象 1.2DOM对象--元素对象常见属性 2.JS事件 2.1JS事件--入门案例 2.2JS事件--驱动机制 2.3常见JS事件--点击事件 2.4常见JS事件--点击事件 ...

  5. Apsara Clouder专项技能认证：实现调用API接口

    一.API 简介 1.API 的概念 API(Application Programming Interface应用程序编程接口)是一些预定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访 ...

  6. arduino驱动oled

    OLED一款小巧的显示屏,感觉可以做出很可爱的东西. 这次实验的这款是128X64的OLED屏幕 , 芯片是SSD1306,请确认自家模块芯片型号,不然对不上号啊 使用IIC的方法,简单实验显示示例程 ...

  7. bug_ warning: control reaches end of non-void function

    摘要 在leetcode上编译时,它显示我编译错误 warning: control reaches end of non-void function 它的意思是:控制到达非void函数的结尾.就是说 ...

  8. springboot学习笔记：4.logback日志配置

    springboot中日志组件推荐使用logback: 由于springboot内置了logback,所以可以直接在application.properties中配置:如果要功能丰富些,则配置下log ...

  9. leetcode第38题：报数

    这是一道简单题,但是我做了很久,主要难度在读题和理解题上. 思路:给定一个数字,返回这个数字报数数列.我们可以通过从1开始,不断扩展到n的数列.数列的值为前一个数列的count+num,所以我们不断叠 ...

  10. SQL中的子查询

    目录 WHERE子查询 HAVING子查询 FROM子查询 SELECT子查询 EXISIT子查询 查询薪资排名的员工信息(面试) z子查询就是将一个查询(子查询)的结果作为另一个查询(主查询)的数据 ...