*/

* 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. [Algo] 175. Decompress String II

    Given a string in compressed form, decompress it to the original string. The adjacent repeated chara ...

  2. 前端框架Bootstrap（10.7国庆补写）

    框架的官网地址:https://v3.bootcss.com/ 主要学习Bootstrap框架提供的样式.组件.插件的使用. 首先下载到本地,在项目中导入使用: 下载的文件中包含:min.css的是压 ...

  3. 关于目录的操作|*|<>|opendir |readdir|unlink|find2perl|rename|readlink|oct()|utime

    #!/usr/bin/perl use strict; use warnings; foreach my $arg(@ARGV) { print "one is $arg\n"; ...

  4. 2017NOIP模拟赛三 A酱的体育课

    据说改编自$CodeM 美团点评编程大赛初赛A 轮$ 简单的水题...考试的时候没想到,xjb打了暴力. 显然,第$x$个人排在第$y$个位置的情况总数为$(n-1)!$,在这些情况中,第$x$人对答 ...

  5. Office 365 共享邮箱/日历

    一.共享邮箱 Office 365共享邮箱对于客户通过电子邮箱提出的问题,共享邮箱是一个很好的处理方式,组织中的多人可以分担监控邮箱和回复的责任,使得客户的问题更快地得到答复,而相关电子邮件都存储在一 ...

  6. demo4j解析xml

    1//先加入dom4j.jar包 2import java.util.HashMap; 3import java.util.Iterator; 4import java.util.Map; 5 6im ...

  7. 直击LG曲面OLED首发现场，高端品质更出众

    简直是太棒了,我可以去看LG曲面OLED电视新品发布会了.这可是LG向中国首次推出的曲面OLED电视.在网上我就已经看到其实曲面OLED电视已经在韩国.美国还有欧洲都上市了,听说现在反响还挺不错.真没 ...

  8. jquey ajax 将变量值封装json传入JAVA action获取解析

    最近在做一个小小的功能模块,前台有很多的数据需要传入到后台,前台页面设计如下: 看起来不是很清楚,总之表单中的数据都要提交到后台进行处理,然后插入到数据库,而且是一起提交到后台的,实现的方法大致有两种 ...

  9. JVM简述

    JVM的东西太多了,我们刚开始学java的时候,就会接触堆.栈,还有方法区,因为我们要知道new出来的对象放在哪里,局部变量放在哪里,static修饰的变量放在哪里. 我从网上截一个图: 这里有三大部 ...

  10. 手撸XGBoost流程（未完成）

    网上的一篇文章,讲的挺清楚的. XGBoost原理分析及实践 XGBoost的原理 xgboost原理--刘建平博客 要注意的地方: 1.预测值y(pred)和损失函数L(y,y(hat))中的y(h ...