php重写html不刷新,html5,html_两个页面进行交互,如何实现页面不刷新就更改html?,html5,html,javascript,php - phpStudy...
两个页面进行交互,如何实现页面不刷新就更改html?
图一Input.html我输入我是一只狗,然后发送给图二View.html页面。view页面如何接收、展示接收到的信息并更新相应位置的html?不刷新view页面的前提下
解决方案
来更新下解决的办法,采用的是最佳答案小伙伴的方法。其他答案没有真正去试过,因为直觉告诉我postMessage最直接也最简单能解决我的问题:
// 发送数据方
var domain = 'http://web.com';
var myPopup = window.open(domain + '/canteen_code/consume_user.html','myWindow');
myPopup.postMessage(result, domain);
// 接收数据方
window.addEventListener('message', function(event) {
if(event.origin !== 'http://web.com') return;
console.log('message received: ' + event.data,event);
},false);
上面我贴的这段代码很普遍也很普通,相信百度一搜很多一样的代码。但是细枝末节还需要自己把握,直至今天下午对这个问题的解决才让我真正了解之前失败的原因,和必须要注意的事项:
otherWindow.postMessage(message, targetOrigin, [transfer]);这段是官网给出的发送数据的基本语法。需要注意的是otherWindow这个必须是其他窗口的一个引用。可以但不仅仅是iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames
targetOrigin这个参数也是重点。摘自官网的回答:如果你明确的知道消息应该发送到哪个窗口,那么请始终提供一个有确切值的targetOrigin,而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
以上。(对了,另附上postMessage中文解释网址,postMessage中文解释)
1.24来更新
由于项目的需要,导致整体的结构要变
两个页面要在两个不同浏览器上打开
然后实现html更新,所以postMessage这种方法貌似适用不了
otherWindow的局限性,之前我是采用window.open的方式即时打开页面获取对象
所以改为采用websocket的方式进行数据传递
楼下凡有提到socket的小伙伴全都给赞一波
另外有不错的关于socket文档可以推荐下
workerman和swoole这两个架构太庞大了而我涉及的只有两个页面之间的交互而已。
所以,拜托各位啦
相关阅读:
html 如何合并单元格
javascript if判断执行体中无法使用变量
求教(SystemJS) Can't resolve all parameters for AppComponent 如何解决
angular2 如何在ngFor外得到index?
Swoole::$php->runMVC() 出错, resource[cache/session] not found
如何写这个cp命令?
ionic2从A页面返回到B页面,如何携带参数
关于在两个div中加入h1
react 结合websocket如何实现根据请求数据动态增加节点
多个span 元素怎么在容器大小差不多总会掉下来
python多进程下应用集合
input file 多张图片上传预览
pyQT4 cX_freeze打包EXE 有150M 太大了
诡异的webstorm 代码文件消失。。。!!!?
linux下如何编译多个cpp文件,并且所包含的头文件在另一个文件包里
bootstrap 多层模态框如何实现?
axios如何处理jsonp数据?
JS中123456789*987654321运行结果不对
链接git的一些问题
pyspider单步调试通过,但是到Dashboard改了状态run不成功。
php重写html不刷新,html5,html_两个页面进行交互,如何实现页面不刷新就更改html?,html5,html,javascript,php - phpStudy...相关推荐
- HTML5两个画布如何弄,有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)...
请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...
- 网页刷新代码(html)两种方式
网页刷新代码(html)两种方式: window.location.href = window.location.href; window.location.reload();
- 页面显示 amp html6,浅谈HTML5 amp;amp; CSS3的新交互特性
本文标题的这副图片,是用Phosotshop制作的.但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字.并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的 ...
- html js 如何判断页面是第一次访问还是重复刷新访问,使用JS判断页面是首次被加载还是刷新...
1 利用window.name属性在页面刷新时不会重置判断(在该属性空置的情况下可使用) if(window.name == ""){ console.log("首次被加 ...
- powerbi实时刷新mysql数据库_PowerBI开发 第七篇:数据集和数据刷新
PowerBI报表是基于数据分析的引擎,数据真正的来源(Data Source)是数据库,文件等数据存储媒介,PowerBI支持的数据源类型多种多样.PowerBI Service(云端)有时不直接访 ...
- html5 多页面共享数据库,可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?)...
可以跨页面使用HTML5 Web SQL数据库吗?(Can HTML5 Web SQL databases be used across pages?) 这可能是一个非常简单的问题,请原谅我的无知,但 ...
- Android下拉刷新完全解析,教你如何一分钟实现下拉刷新功能 (转)
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9255575 最 近项目中需要用到ListView下拉刷新的功能,一开始想图省事,在 ...
- 微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因 我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白 白屏了,那么为什么会存在这个问 ...
- 用html5做一个介绍自己家乡的页面_(近万字)一篇文章带你了解HTML5和CSS3开发基础与应用-适合前端面试必备...
作者 | Jeskson来源 | 达达前端小酒馆 HTML5和CSS3开发基础与应用,详细说明HTML5的新特性和新增加元素,CSS3的新特性,新增加的选择器,新的布局,盒子模型,文本,边框,渐变,变 ...
最新文章
- tensorflow兼容处理 tensorflow.compat.v1 tf.contrib
- plotly可视化绘制嵌入式子图
- python3基础语法-Python3 - 基础语法
- IFE JavaScript Task0002-1 小练习1:处理用户输入
- SQLITE中原子提交的实现
- 赶快使用Q-Dir软件,使您的文件夹操作更加高效
- 我想变得富有的10个理由
- 为什么说车联网安全将成为热门产业
- OpenGl文章 Android OpenGL ES 简明开发教程
- leetcode 53. Maximum Subarray(DP动态规划问题)
- 基于opencv的数字识别
- ABB工业机器人程序编写与实战
- 【统计学】英文概念之Mean和Average的区别
- 动态域名解析ipv6 群辉dnspod_群晖设置ipv6动态域名
- RAID技术分类介绍
- 2017秋季赛Web安全测试训练赛wp【安恒】
- 深入理解工具链-自己搭建STM32编程IDE
- P2135 方块消除
- Spring Cloud中Hystrix的请求合并
- 漏洞复现篇——利用XSS漏洞实现键盘记录
热门文章
- RxJava使用Observable.zip的Iterable参数
- html绘制城堡,HTML5动画 - 山谷城堡
- python网络监控程序_python linux监控程序
- python保留sqrt_python:quot;因式分解quot;引出的知识盲点
- 力扣 13.罗马数字转整数
- (Node*)malloc(sizeof(Node))的理解
- 洛谷 P1036 [NOIP2002 普及组] 选数(DFS)
- 配置 deepchem 环境 [需要anaconda]
- C语言中 . 和 - 区别详解(举例解释)
- hihocoder第233周