精华内容
下载资源
问答
  • Coupe 是一种用于在可能位于不同域上的网页之间进行通信的工具。 它的工作原理是在每个通信框架上打开一个 iframe。 这些页面使用postMessage与 iframe 进行通信。 这些框架使用localStorage在它们之间共享值。 您...
  • 如果网页 A 可以发送信息到网页 B,反之也然,而不必动用请求/应答模式,该是一件多么惬意的事儿。可以轻松地实现聊天不是吗?
  • js实现网页间通信

    千次阅读 2017-06-06 10:29:34
    在用window.open("...)后打开的网页后,在打开的a.html文件发现,opener是存在的,但是opener.document却是null;而window.parent和window.parent.document...2,如何进行父子界面的通信?(打开它的页面和这个页...

    在用window.open("a,html")后打开的网页后,在打开的a.html文件发现,opener是存在的,但是opener.document却是null;而window.parent和window.parent.document是有的,但是却取不出数据,很奇怪。由此,引出了两个问题:

    1,opener和parent的联系和区别是什么?

    2,如何进行父子界面的通信?(打开它的页面和这个页面间的通信)

    3,如何进行页面间的通信?

     

    一、opener和parent的联系和区别

    1,opener和parent的概念

    根据w3c school文档,opener 属性是一个可读可写的属性,可返回对创建该窗口的 Window 对象的引用。opener即谁打开我的,比如A页面利用window.open弹出了B页面窗口,那么A页面所在窗口就是B页面的opener,在B页面通过opener对象可以访问A页面。

    parent相对简单,只有一句话:返回父窗口。

    那么什么叫父窗口?比如一个A页面利用iframe或frame调用B页面,那么A页面所在窗口就是B页面的parent。

    在JS中,window.opener只是对弹出窗口的母窗口的一个引用。比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过window.opener(省略写为opener)来引用a.html,包括a.html的document等对象,操作a.html的内容。

    那么,第一个问题解决了,opener是打开自己的窗口,而parent是这个小窗口所在的窗口。

    但是,为什么我会遇到有opener但是没有document这种问题?

     

    二、和opener通信

    我用了如下两段代码:

    aa.html:

    <html>
    <head>
    <title>无标题文档</title>
    </head>
    <body>
    <span id="name"></span>
    <input type="button" " value="弹窗" οnclick="window.open('bb.html')" />
    </body>
    </html

     

    bb.html:

     <head>
     <title>无标题文档</title>
     </head>
     <body>
     <input type="text"  id="inputValue"/>
     <input type="button"  value="添加" οnclick="window.opener.document.getElementById('name').innerHTML=inputValue.value"/>
     </body>
     </html> 

     

     <head>
     <title>无标题文档</title>
     </head>
     <body>
     <input type="text"  id="inputValue"/>
     <input type="button"  value="添加" οnclick="window.opener.document.getElementById('name').innerHTML=inputValue.value"/>
     </body>
     </html> 

     

    代码很简单,想法是在bb.html中的text中输入一段文字后点添加即可在aa中显示添加的内容。

     

    最后返现在360中不论如何都不能显示,而在ie中设置允许控件之后就可以执行了。

     

    结论:做javascript试验时最好用ie,是否设置空间可以显示。

     

    三、和parent通信

    类似于opener通信。

     

    展开全文
  • 网页间通信的方法

    千次阅读 2018-12-17 01:32:05
    以下两种情况可以利用的postMessage进行页面间通信,可以进行跨域通信。 1.页面和页面中嵌套的iframe中。 2.页面和由该页面打开的新页面。 postMessage用法: window.postMessage(msg,targetOrigin) ...

    1.iframe

    iframe需要两个页面是同源的,否则会出现跨域问题。

    parent.html:

    <html>
    <head>
        <script type="text/javascript">
            function say(){
                alert("parent.html");
            }
            function callChild(){
                myFrame.window.say();
                myFrame.window.document.getElementById("button").value="调用结束";
            }
        </script>
    </head>
    <body>
        <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>
        <iframe name="myFrame" src="child.html"></iframe>
    </body>
    </html>

    child.html:

    <html>
    <head>
        <script type="text/javascript">
            function say(){
                alert("child.html");
            }
            function callParent(){
                parent.say();
                parent.window.document.getElementById("button").value="调用结束";
            }
        </script>
    </head>
    <body>
        <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>
    </body>
    </html>

    2.postMessage

    页面条件:

    当然所谓的页面间也是有条件限制的。以下两种情况可以利用的postMessage进行页面间通信,可以进行跨域通信。

    1.页面和页面中嵌套的iframe中。

    2.页面和由该页面打开的新页面。

    postMessage用法:
    window.postMessage(msg,targetOrigin)

    的postMessage触发消息事件,由此达到页面间通信的目的。

    参数味精为要发送的数据,格式支持字符串或对象注意:IE8中只支持字符串格式。

    接收数据:

    在接收的回调函数中,定义参数
    event.event.origin为事件源的origin,即协议+域名+端口; 
    event.data为接收到数据; 
    event.source为触发该事件的页面的窗口对象;

    示例(IFRAME):

    实现功能:父页面与iframe的页面间的通信。

    父页面地址:HTTP://本地主机:9020 /测试/ iframe中/ main.html中

    iframe的页面地址:HTTP://本地主机:9020 /测试/ iframe中/ sub.html

      main.html:

    <html>
    <head>
      <title>postMessage Demo - iframe mainPage</title>
    </head>
    <body>
      main page
     <input type="button" value="send message" onclick="sendMessage()">
      <br>
      <iframe src="http://localhost:9020/test/iframe/sub.html" id="sub"></iframe>
    </body>
    </html>
    <script>
      window.addEventListener('message',function(event){
        console.log('recieve data form subPage:');
        console.log(event.origin);
        console.log(event.data);
        console.log(event.source);
      },false);
    
      function sendMessage(){
        var subPage = document.getElementById('sub');
        var targetOrigin = 'http://localhost:9020/test/iframe/sub.html';
        subPage.contentWindow.postMessage('data from mainPage',targetOrigin);
      }
    </script>

     sub.html:

    <html>
    <head>
      <title>postMessage Demo - iframe subPage</title>
    </head>
    <body>
      sub page
      <input type="button" value="send message" onclick="sendMessage()">
    </body>
    </html>
    <script>
      window.addEventListener('message',function(event){
        console.log('recieve data form mainPage:');
        console.log(event.origin);    // http://localhost:9020
        console.log(event.data);      // 接收到的数据
        console.log(event.source);    // 输出window对象
      },false);
    
      function sendMessage(){
        var mainPage = window.parent;
        var targetOrigin = 'http://localhost:9020/test/iframe/main.html';  
        mainPage.postMessage('data form subPage',targetOrigin);
      }
    </script>

    3.localstroge

    1. 在页面A中写监听:

    function onStorageChange(e) {
         console.log(e);    
    }
    window.addEventListener("storage",onStorageChange);
    

    2. 页面B中进行任何数据操作都会触发所有同源页面的storage事件。(值得特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。) 

    4.websocket

    使用websocket配合服务器,完成通信。

    展开全文
  • 由于工作的一些原因要使用不通过请求来使网页和桌面程序之间相互发送消息,想来想去还是用websocket之前也百度过一些其他的方法但发现有限制系统问题就给抛弃了。 websoket利用本地电脑的端口来使网页和桌面程序...

    由于工作的一些原因要使用不通过请求来使网页和桌面程序之间相互发送消息,想来想去还是用websocket之前也百度过一些其他的方法但发现有限制系统问题就给抛弃了。

    websoket利用本地电脑的端口来使网页和桌面程序通信,桌面程序设置为服务端,网页设置为客户端。

    下载插件:https://download.csdn.net/download/qq_35319925/10231896

                   List<IWebSocketConnection> allSockets;
                   WebSocketServer server;    
                   //创建服务器
                    FleckLog.Level = LogLevel.Debug;
                    allSockets = new List<IWebSocketConnection>();
                    
                    server = new WebSocketServer("ws://0.0.0.0:7182");//设置ip和端口号(端口号是本地电脑的端口号通讯时其他电脑不能参与通信)
                    server.Start(socket =>
                    {
                        socket.OnOpen = () =>
                        {
                            allSockets.Add(socket);//打开通讯
                        };
                        socket.OnClose = () =>
                        {
                            allSockets.Remove(socket);//关闭通讯
                        };
                        socket.OnMessage = message =>
                        {
                            allSockets.ToList().ForEach(ss => ss.Send(message));//接收的消息
                        };
                    });
    
                    //发送消息
                         var input = "hello world";
                foreach (var socket in allSockets.ToList())
                {
                   socket.Send(input);
                   
                }

    创建客户端程序

     <script type="text/javascript">
            var start = function () {
                var inc = document.getElementById('incomming');
                var wsImpl = window.WebSocket || window.MozWebSocket;
                var form = document.getElementById('sendForm');
                var input = document.getElementById('sendText');
    
                inc.innerHTML += "connecting to server ..<br/>";
    
                // create a new websocket and connect  localhost
                window.ws = new wsImpl('ws://localhost:7182/');//ip、端口号和服务端一致
    
                // when data is comming from the server, this metod is called
                ws.onmessage = function (evt) {
                    inc.innerHTML += evt.data + '<br/>';//接收服务器消息
                };
                // when the connection is established, this method is called
                ws.onopen = function () {
                    inc.innerHTML += '.. connection open<br/>';//打开通讯
                };
                // when the connection is closed, this method is called
                ws.onclose = function () 
                {
                    inc.innerHTML += '.. connection closed<br/>';//关闭通讯
                }
    
                form.addEventListener('submit', function (e) {  //.. connection closed
                    e.preventDefault();
                    var val = input.value;
                    ws.send(val);//客户端向服务端发送消息
                    input.value = "";
                    document.getElementById("i").src = "";
                });
            }
            window.onload = start;
        </script>
    
     <form id="sendForm">
            <input id="sendText" placeholder="Text to send" />
           <img src="" id="i" />
        </form>
        <pre id="incomming"></pre>

     

    展开全文
  • web-view可用于在小程序中内嵌网页。只要符合官方的条件,为web-view设置src属性来指定网页即可在小程序中显示。一个页面只能有一个web-view,且会自动铺满整个小程序页面。 因此,对于那些只需要进行显示的页面,...

    当前微信小程序的调试基础库最新版本为2.3.0。

    web-view可用于在小程序中内嵌网页。只要符合官方的条件,为web-view设置src属性来指定网页即可在小程序中显示。一个页面只能有一个web-view,且会自动铺满整个小程序页面。

    因此,对于那些只需要进行显示的页面,例如公司官网等,该组件省去了小程序开发的麻烦,直接内嵌显示即可。当然页面最好对移动端做了适配。

     

    然而,若希望与小程序进行通信交互,限制就比较大了。

    当前有个需求,需要制作一个微信小程序,一方面需要调用小程序的蓝牙功能,另一方面需要使用一些小程序已删除的js功能。

    于是有了如下思路:

    • 使用常规网页实现小程序删除的那部分js功能。
    • 使用web-view将网页内嵌到小程序中显示。
    • 网页与小程序之间进行数据的交互。
    • 使用小程序调用蓝牙功能。

    思路正常,但无法实现,关键卡在网页与小程序之间进行数据的交互这一步上。

    网页与小程序之间进行数据的交互有两部分:

    1. 小程序→网页

    官网没有提供发送的接口,只能通过修改web-view的src属性,使用&来附加参数,并在网页中解析参数。

    这一点可以做到。只是这意味着小程序每次向网页传参,都要刷新一次网页。

    1. 网页→小程序

    官方文档只提供了一种方式:

    • 在web-view中添加bindmessage属性,并绑定一个函数,用于监听网页发来的消息。
    • 在网页中引入jweixin-x.x.x.js,然后调用wx.miniProgram.postMessage()来向小程序发送数据。

    然而,实际上官方文档特意对bindmessage进行了说明:网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。

    也就是说,这唯一的一种通信方式,并不是按照常规的思路“网页向小程序发送数据,然后小程序监听到并执行回调”运作的,只有(小程序后退、组件销毁、分享)这三种情况下,bindmessage才会被触发并接收消息。

    所以,即使在网页中调用了wx.miniProgram.postMessage(),小程序也不会立即响应,bindmessage所绑定的函数不会执行。

     

    虽然网页和小程序之间即时传参无法实现,不过小程序可以通过web-view的src属性来切换网页,网页也可以通过wx.miniProgram.navigateTo()来切换小程序的页面。这些功能都是微信通过JSSDK为web-view所内嵌的网页提供的支持,但仅仅是提供了一部分JSSDK的功能,限制同样很多。

    展开全文
  • 两个网页之间数据通信

    千次阅读 2005-03-02 13:03:00
    a.htm 我晕 我衰 我倒 我靠 我郁闷 我期待 var bwin;var n=1;function show(){if(bwin)if(event.srcElement.tagName=="TD"){bwin.document.dream.elements("n"+n).value=event.srcElement.inne
  • 今天有个同事问到如何在原网页和被打开的网页中进行数据通信,用这里说一下用window.name的解决方法。 a.html<!doctype html> <!DOCTYPE html> <title></title> ...
  • 本文结合TCP/IP协议族,对网页请求过程进行深度剖析,主要讲解网页请求过程中各种协议之间的耦合和原理,有不合之处,望不吝指教。 TCP/IP概述 TCP/IP(Transmission Control Protocol/Internet Pr...
  • HTML网页与CGI之间通信的 实例分析

    万次阅读 2011-03-31 17:26:00
    本来是在做用户登录的界面,做到了一半就是不知道他怎么与服务器实现通信的,今天终于得到了启发,感谢“happyboygd(七八) ”在博客中分析的实例,http://bbs.chinaunix.net/thread-1757580-1-1.html !下面根据上...
  • 在使用web组件进行快应用与网页间通信的时候,有这几个发现: 1、运行'npm run watch'时会提示web组件不支持message事件,但实际上是支持的(只是提示上的小问题) 2、快应用发信息到网页,与网页发信息到快应用...
  • 进程间通信

    2016-10-08 20:27:03
    进程间通信(Inter-Process Communication,IPC)就是在不同进程之间传播或交换信息,为了能使不同的进程互相访问资源并进行协调工作,才有了IPC。使用IPC 的理由: 信息共享:Web服务器,通过网页浏览器使用进程...
  • 使用页面插件实现网页及时通信Demo

    千次阅读 2010-04-14 21:07:00
    该工程利用Flex插件实现网页及时通信功能,包括消息群发、组管理等功能。测试要求:Web项目启动之后,需手动启用com.gis.lp.commander.CChatRoom程序实现思路:服务器端(主要是以CChatRoom为代表的各实现类)实现...
  • 同源页面间通信,storage事件监听介绍使用扩展跨域页面间通信 postMessage介绍使用安卓平台差异化处理安全问题 同源页面间通信,storage事件监听 参考博客:h5 storage事件监听 介绍 当同源页面的某个页面修改了...
  • 同源页面通信网页登录方面的应用

    千次阅读 多人点赞 2021-03-10 13:08:02
    为什么一个“普普通通”的网页登录要和“看似高大上”的同源页面通信联系了起来? 可能你没有发现:往往如果你的登录页是从主页通过 window.open() 或 js-href 或 <a href="" target="_blank"> 另打开的一个...
  • unity3d与web网页通信

    2016-01-28 11:14:00
    Unity3D 中的 C# 和 JavaScript 脚本之间是可以互相访问并交互的,但是要求这些被访问和操作的 C# 和 JavaScript 组件必须放在名为 Standard Assets 或者 Plugins 目录下,这样保证被访问和操作的组件是第一时间被...
  • 小程序网页与小程序和开发者服务器三者之间通信方式,如下图所示:  
  • 手机端与网页通过websocket通信

    千次阅读 2017-04-29 18:13:47
    手机端与网页通讯,使用websocket完成二者之间的联通。websocket选用socket.io类实现。服务器端,使用nodejs,代码依赖了express和socket.io。首先建立一个http服务器var app = require('express')();var server = ...
  • Web 网页通信之长连接、长轮询

    万次阅读 2013-09-27 14:30:39
    从图1可以看出,长连接必须由客户端不停地进行请求来维持,所以在客户端和服务器保持正常的“心跳”至为关键,参数POLLING_LIFE应小于WEB服务器的超时时间,一般建议在10~20秒左右。 3. 网络因素的影响 在...
  • 若要使用该属性启用WebBrowser 控件承载的网页与包含WebBrowser 控件的应用程序之间通信,一般使用WebBrowser.ObjectForScripting 属性,一般来说只需要使用该属性可以将动态 HTML (DHTML) 代码与客户端应用程序...
  • iframe父子页面间通信总结

    万次阅读 2015-10-09 18:49:17
    随着网页结构的复杂化,页面内嵌frame越来越常见,但不管是作为内容页来显示,还是作为组件模块嵌入,都有父子页面间通信的需求可能,因此为了更好的实现需求就必须了解父子页面间的通信。iframe子页面与父页面通信...
  • 研究了大晚上再结合网上的资料终于实现了物理机与虚拟机之间通信,并且都能访问外网,且虚拟机之间也能正常通信。现在把方法分享出来给需要的同学。 ps:虚拟机的安装这里就不说了哈。 第一步:还原“虚拟网络编辑...
  • 网页对控件可以调用函数,并且传送信息。控件也可以给网页发送消息 相关源代码下载链接: “以管理员身份运行”前一篇所写的工程。 按照下面的图片的方法添加方法。(图片截图自下面参考书) 网页调用ATL方法。...
  • Socket进程间通信

    千次阅读 2016-08-29 20:51:26
    我们深谙信息交流的价值,那网络中进程之间如何通信,如我们每天打开浏览器浏览网页时,浏览器的进程怎么与web服务器通信的?当你用QQ聊天时,QQ进程怎么与服务器或你好友所在的QQ进程通信?这些都得靠socket?那...
  • 一、下载网页实现MQTT的js包 1、从<官网>按照如下图所示步骤下载MQTT的JS包 2、直接从我的云盘获取 链接:https://pan.baidu.com/s/1iTcSBmM_J4ZI9OK58qfe3w 提取码:d92l 复制这段内容后打开百度网盘...
  • 页面间通信的列子 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;A&lt;/title&a
  • WebBrowser控件之所有强大,一方面是由于控件本身提从了一系列的方法,包括打开网页,获取网页信息,操作网页(如前进后通等),拦截网页事件,另一方面则是提供了与网页相调用的机制。即以下2点: 1:让HTML页面的...
  • js窗口间通信--postMessage

    千次阅读 2016-03-28 20:32:38
    why我们知道:浏览器限制不同窗口之间通信,除非同一个域名下的网页。为了解决这一问题,HTML5新出了一个API window.postMessage, 实现了不同域名的窗口通信。 whatMDN上webAPI语法: otherWindow.postMessage...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 129,325
精华内容 51,730
关键字:

网页之间的通信