一种实现移动端环境下不同网页间的通信方法与终端与流程

[0001]
本发明涉及网页间通信技术领域，特别涉及一种实现移动端环境下不同网页间的通信方法与终端。


背景技术：

[0002]
在移动端应用中，存在一类需求，app打开网页a，然后网页a需要app打开网页b，然后网页a和网页b之间需要进行通信。
[0003]
类似问题的传统解决方案有：
[0004]
1、通过websocket实现，但是websocket几个缺点：
[0005]
a、需要一台单独的websocket服务器，部署成本高；
[0006]
b、如果websocket服务器宕机或者阻塞，功能就会出问题，对服务端依赖程度高；
[0007]
c、前端开发需要了解websocket的相关技术，还需要约定websocket的协议，开发维护成本高。
[0008]
2、a和b直接使用postmessage通信，这种方案有以下缺点：
[0009]
由于浏览器的安全策略，a、b两个网页不能跨域，即a必须自己打开b网页，但是很多情况下a是通过消息机制向app发送请求，由app打开b网页，这种情况下，a、b之间无法进行通信。


技术实现要素：

[0010]
本发明所要解决的技术问题是：提供一种实现移动端环境下不同网页间的通信方法与终端，在不需要依靠websocket服务器的情况下，实现不同网页间的跨域通信。
[0011]
为了解决上述技术问题，本发明采用的技术方案为：
[0012]
一种实现移动端环境下不同网页间的通信方法，包括：
[0013]
s1、当第一网页需要与第二网页通信时，使所述第一网页通过iframe加载位于第一公共域名的预设通信页面，生成第一通信子页面，使所述第二网页通过iframe加载所述预设通信页面，生成第二通信子页面；
[0014]
s2、将所述第一网页的通信请求内容发送至第一通信子页面，并由所述第一通信子页面向第一公共域名的localstroge写入所述通信请求内容；
[0015]
s3、由所述第二通信子页面读取所述第一公共域名的localstroge中所存储的所述通信请求内容，并将所述通信请求内容发送至所述第二网页；
[0016]
s4、由所述第二网页对所述通信请求内容进行处理，生成并返回通信应答内容至所述第一网页。
[0017]
本发明的有益效果在于：本发明使不同网页均加载了预设的通信页面，通过通信页面位于同一域名下的特性，实现了“网页a-a加载的通信页面-通信页面域名的localstroge-b加载的通信页面-网页b”的通信，即实现了不同网页间的跨域通信，且不需要依靠websocket服务器，大大节约了成本。
附图说明
[0018]
图1为本发明的一种具体实施例的流程图；
[0019]
图2为本发明的一种具体实施例的uml序列图；
[0020]
图3为本发明的一种具体实施例的结构图；
[0021]
标号说明：
[0022]
1、一种实现移动端环境下不同网页间的通信终端；2处理器；3、存储器。
具体实施方式
[0023]
为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。
[0024]
请参照图1和图2，一种实现移动端环境下不同网页间的通信方法，包括：
[0025]
s1、当第一网页需要与第二网页通信时，使所述第一网页通过iframe加载位于第一公共域名的预设通信页面，生成第一通信子页面，使所述第二网页通过iframe加载所述预设通信页面，生成第二通信子页面；
[0026]
s2、将所述第一网页的通信请求内容发送至第一通信子页面，并由所述第一通信子页面向第一公共域名的localstroge写入所述通信请求内容；
[0027]
s3、由所述第二通信子页面读取所述第一公共域名的localstroge中所存储的所述通信请求内容，并将所述通信请求内容发送至所述第二网页；
[0028]
s4、由所述第二网页对所述通信请求内容进行处理，生成并返回通信应答内容至所述第一网页。
[0029]
从上述描述可知，本发明的有益效果在于：使不同网页均加载了预设的通信页面，通过通信页面位于同一域名下的特性，实现了“网页a-a加载的通信页面-通信页面域名的localstroge-b加载的通信页面-网页b”的通信，即实现了不同网页间的跨域通信，且不需要依靠websocket服务器，大大节约了成本。
[0030]
进一步的，所述第一网页和第一通信子页面间以及所述第二网页和第二通信子页面间通过postmassage消息的方式进行通信。
[0031]
由上述描述可知，通过postmassage消息的方式，实现了第一网页和第一通信子页面间的实时通信。
[0032]
进一步的，所述预设通信页面为预设网页文件，所述预设网页文件包含以下内容：
[0033]
接收postmassage消息，判断postmassage消息中是否包含传递字段，若包含，则将其写入当前域名的localstroge中，否则将其废弃；
[0034]
监听localstroge的消息更新，若存在更新信息，则从所述localstroge中读取所述更新消息，将所述更新消息通过postmassage发送给父页面。
[0035]
由上述描述可知，由预设通信页面进行实时的接收和监听，当第一网页向预设通信页面发送通信请求内容时，预设通信页面进行实时接收并对localstroge进行写入，此时第二网页加载的第二通信子页面通过对localstroge的消息更新进行实时的监听，并从localstroge中获取到所更新的通信请求内容进行处理。由此，通过目标网页字段保证消息传递的准确性，通过实时的接收和监听来保证消息传递的及时性，从而保证消息传递的准确性和及时性。
[0036]
进一步的，所述步骤s3和步骤s4之间还包括以下步骤：
[0037]
s31、由所述第二网页读取第二通信子页面发送的通信请求内容，通过所述通信请求内容的目标网页字段判断目标网页是否是自己，若是，则进行所述步骤s4，否则将其废弃。
[0038]
由上述描述可知，网页读取通信页面发送的通信请求内容时，需要对通信请求内容的目标对象进行判断，仅对目标对象为自身的通信请求内容进行处理，保证了请求处理的精确度和效率。
[0039]
进一步的，所述步骤s4中所述返回通信应答内容至所述第一网页具体为：
[0040]
将所述第二网页对通信请求内容的通信应答内容发送给第二通信子页面；
[0041]
由所述第二通信子页面将所述通信应答内容写入第一公共域名的localstroge中；
[0042]
由所述第一通信子页面读取localstroge中的所述通信应答内容，并发送给第一网页。
[0043]
由以上描述可知，第二网页返回通信应答内容的步骤和通信请求内容的原理一致，通过第二通信子页面将消息实时写入localstroge，第一通信子页面对localstroge的实时监听，保证了消息传递的准确性和及时性。
[0044]
请参照图3，本发明还提供一种实现移动端环境下不同网页间的通信终端，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：
[0045]
s1、当第一网页需要与第二网页通信时，使第一网页通过iframe加载位于第一公共域名的预设通信页面，生成第一通信子页面，使第二网页通过iframe加载所述预设通信页面，生成第二通信子页面；
[0046]
s2、将所述第一网页的通信请求内容发送至第一通信子页面，并由第一通信子页面向所述第一公共域名的localstroge写入所述通信请求内容；
[0047]
s3、由所述第二通信子页面读取所述第一公共域名的localstroge中所存储的所述通信请求内容，并将所述通信请求内容发送至所述第二网页；
[0048]
s4、由所述第二网页对所述通信请求内容进行处理，生成并返回通信应答内容至所述第一网页。
[0049]
从上述描述可知，本发明的有益效果在于：使不同网页均加载了预设的通信页面，通过通信页面位于同一域名下的特性，实现了“网页a-a加载的通信页面-通信页面域名的localstroge-b加载的通信页面-网页b”的通信，即实现了不同网页间的跨域通信，且不需要依靠websocket服务器，大大节约了成本。
[0050]
进一步的，所述第一网页和第一通信子页面间以及所述第二网页和第二通信子页面间通过postmassage消息的方式进行通信。
[0051]
由上述描述可知，通过postmassage消息的方式，实现了第一网页和第一通信子页面间的实时通信。
[0052]
进一步的，所述预设通信页面为预设的网页文件，包含以下内容：
[0053]
接收postmassage消息，判断postmassage消息中是否包含传递字段，若包含，则将其写入当前域名的localstroge中，否则将其废弃；
[0054]
监听localstroge的消息更新，读取更新的消息，并通过postmassage发送给父页面。
[0055]
由上述描述可知，由预设通信页面进行实时的接收和监听，当第一网页向预设通信页面发送通信请求内容时，预设通信页面进行实时接收并对localstroge进行写入，此时第二网页加载的第二通信子页面通过对localstroge的消息更新进行实时的监听，并从localstroge中获取到所更新的通信请求内容进行处理。由此，通过目标网页字段保证消息传递的准确性，通过实时的接收和监听来保证消息传递的及时性，从而保证消息传递的准确性和及时性。
[0056]
进一步的，在所述步骤s3和步骤s4之间，所述处理器执行所述计算机程序时还包括以下步骤：
[0057]
s31、第二网页读取第二通信子页面发送的通信请求内容，通过所述通信请求内容的目标网页字段判断目标网页是否是自己，若是，进行步骤s4，否则将其废弃。
[0058]
由上述描述可知，网页读取通信页面发送的通信请求内容时，需要对通信请求内容的目标对象进行判断，仅对目标对象为自身的通信请求内容进行处理，保证了请求处理的精确度和效率。
[0059]
进一步的，所述步骤s4中所述返回通信应答内容至所述第一网页具体为：
[0060]
将所述第二网页对通信请求内容的通信应答内容发送给第二通信子页面；
[0061]
所述第二通信子页面将所述通信应答内容写入当前域名的localstroge中；
[0062]
所述第一通信子页面读取localstroge中的所述通信应答内容，并发送给第一网页。
[0063]
由以上描述可知，第二网页返回通信应答内容的步骤和通信请求内容的原理一致，通过第二通信子页面将消息实时写入localstroge，第一通信子页面对localstroge的实时监听，保证了消息传递的准确性和及时性。
[0064]
请参照图1，本发明的实施例1为：
[0065]
一种实现移动端环境下不同网页间的通信方法，包括：
[0066]
s1、当第一网页需要与第二网页通信时，使所述第一网页通过iframe加载位于第一公共域名的预设通信页面，生成第一通信子页面，使所述第二网页通过iframe加载所述预设通信页面，生成第二通信子页面；
[0067]
由此，基于第一网页通过iframe加载预设通信页面，则第一网页为第一通信子页面的父页面，同理，第二网页为第二通信子页面的父页面。
[0068]
s2、将所述第一网页的通信请求内容发送至第一通信子页面，并由所述第一通信子页面向第一公共域名的localstroge写入所述通信请求内容；
[0069]
s3、由所述第二通信子页面读取所述第一公共域名的localstroge中所存储的所述通信请求内容，并将所述通信请求内容发送至所述第二网页；
[0070]
由于第一通信子页面和第二通信子页面是由预设通信页面被加载而来，而这属于同源，皆位于同一公共域名下，因此可以对同一localstroge进行读写。
[0071]
在本实施例中，步骤s3具体为：
[0072]
s31、由所述第二网页读取第二通信子页面发送的通信请求内容，通过所述通信请求内容的目标网页字段判断目标网页是否是自己，若是，则进行所述步骤s4，否则将其废
弃。
[0073]
s4、由所述第二网页对所述通信请求内容进行处理，生成并返回通信应答内容至所述第一网页。
[0074]
所述步骤s4中所述返回通信应答内容至所述第一网页具体为：
[0075]
将所述第二网页对通信请求内容的通信应答内容发送给第二通信子页面；
[0076]
所述第二通信子页面将所述通信应答内容写入当前域名的localstroge中；
[0077]
所述第一通信子页面读取localstroge中的所述通信应答内容，并发送给第一网页。
[0078]
所述第一网页和第一通信子页面间以及所述第二网页和第二通信子页面间通过postmassage消息的方式进行通信。
[0079]
所述预设通信页面为预设网页文件，所述预设网页文件包含以下内容：
[0080]
接收postmassage消息，判断postmassage消息中是否包含传递字段，若包含，则将其写入当前域名的localstroge中，否则将其废弃，所述传递字段用以判断消息是否需要由通信子页面来进行进一步传递；
[0081]
监听localstroge的消息更新，若存在更新信息，则从所述localstroge中读取所述更新消息，将所述更新消息通过postmassage发送给父页面。
[0082]
请参照图2，本发明的实施例二为：
[0083]
一种实现移动端环境下不同网页间的通信方法，包括：
[0084]
本事实例中预设通信页面tag_event.html，包含以下内容：
[0085]
接收postmassage消息，判断postmassage消息中是否包含to:tag_event，若包含，则将其写入当前域名的localstroge中，否则将其废弃，本实施例中传递字段为to:tag_event；
[0086]
监听localstroge的消息更新，读取更新的消息，并通过postmassage发送给父页面；
[0087]
在本实施例中，将tag_event.html预设在www.event.com这个公共域名下。
[0088]
页面page_b为页面page_a通过app打开的页面，其中，页面page_a在域名www.a.com下，页面page_b在域名www.b.com下，因此，二者间为跨域通信；当页面page_a需要与页面page_b通信时，通过iframe加载第一步创建的www.event.com/tag_event.html；page_b也通过iframe加载第一步创建的www.event.com/tag_event.html；
[0089]
当page_a要发消息给page_b时，发送postmessage给page_a加载的tag_event，本实施例中消息的格式为to:tag_event+target:page_b+消息具体内容；page_a的tag_event收到来自page_a的postmessage消息后，将消息具体内容，写入到www.event.com这个域名的localstorage中；
[0090]
page_b的tag_event监听到www.event.com的localstorage发生变化，读取localstorage的内容，并通过postmessage发送给page_b；
[0091]
page_b接收来自加载的tag_event的postmessage消息，如果消息中包含target:page_b，则处理该消息，否则废弃该消息，本实施例中，target:page_b为目标网页字段。
[0092]
在本实施例中，page_a为第一网页，page_b为第二网页，第一通信子页面为page_a的tag_event，第二通信子页面为page_b的tag_event，www.event.com为公共域名，tag_
event.html为预设通信页面。
[0093]
对于本实施例中出现的名词具体说明如下：
[0094]
跨域：网站的域名或者端口不一致时被称为跨域，浏览器对跨域存在安全限制，跨域的站点之间无法共享数据。
[0095]
postmessage：浏览器提供的在相同tab环境下，跨域的通信方法。
[0096]
localstorage：浏览器提供的本地缓存功能，javascript可以通过localstorage将数据缓存在客户端，同时localstorage数据变化时，浏览器会触发事件。
[0097]
iframe：浏览器提供的在当前网页中，显示另一个网页的功能。
[0098]
请参照图3，本发明的实施例三为：
[0099]
一种实现移动端环境下不同网页间的通信终端1，包括存储器3、处理器2及存储在存储器3上并可在处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现实施例一中的内容。
[0100]
综上所述，本发明提供的一种实现移动端环境下不同网页间的通信方法与终端，使不同网页均加载了预设的通信页面，通过通信页面位于同一域名下的特性，实现了“网页a-a加载的通信页面-通信页面域名的localstroge-b加载的通信页面-网页b”的通信，且通信子页面在对父页面的接收和发送消息以及对localstroge的读写都是实时的，在实现了不同网页间的跨域通信的同时，还保证了通信的及时性和准确性，父页面接受消息时只对目标为自己的消息进行处理，提高了消息处理的准确性和效率，且以上操作不需要依靠websocket服务器，大大节约了成本。
[0101]
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。