*/

* 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开发学习：接口

    [可见度] interface 接口名称 [extends 其他的接口名] { // 声明变量 // 抽象方法 } import java.lang.*; //引入包 public interface ...

  2. Java任务调度框架之分布式调度框架XXL-Job介绍

    ​ Java任务调度框架之分布式调度框架XXL-Job介绍及快速入门 调度器使用场景: Java开发中经常会使用到定时任务:比如每月1号凌晨生成上个月的账单.比如每天凌晨1点对上一天的数据进行对账操作 ...

  3. Java之常见异常

    package com.atguigu.java1; import java.io.File;import java.io.FileInputStream;import java.util.Date; ...

  4. android 获得存储设备状态

    1.获取存储器总大小,可用大小 File path= Environment.getExternalStorageDirectory();StatFs fs = new StatFs(path.get ...

  5. embed标签属性

    embed标签属性   (一).基本语法: embed src=url 说明:embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等,    Netscape及新版 ...

  6. GSON解译Json为DTO

    除了用okhttp网络库外,还用到google的gson库. 1. uti类的对象一般都用懒汉模式.这次gson也是用懒汉模式. public class GsonTools { private st ...

  7. docker容器中安装中文字体

    在项目中用到pdf导出功能,需要安装中文字体,项目使用docker部署,为了方便决定在将字体安装在镜像中. 1.在dockerfile文件中添加字体copy语句(本次用是的宋体,字体源文件放在dock ...

  8. ionic3 设置状态栏背景颜色

    this.statusBar.styleDefault(); this.statusBar.overlaysWebView(true); this.statusBar.backgroundColorB ...

  9. vue2.0学习之路由

    下载vue-router: cnpm install vue-router --save router/main.js /*引入所需要的组件*/ import VueRouter from 'vue- ...

  10. signal——信号集

    1.信号集  每个进程都有一个信号屏蔽字,它规定了当前要阻塞递送到该进程的信号集.对于每种可能的信号,该屏蔽字中都有一bit位与之对应.信号数可能会超过一个整型数所包含的二进制位数,因此POSIX.1 ...