父页面和子页面(iframe)处于2个不同的进程(即使在同一个域),进程之间的通讯必须通过每个进程内【事件监听所在的线程】来完成。最重要的是,通讯时传输的数据格式必须是序列化的格式,序列化格式指【一维】【线性】的数据类型比如字符串、字节流等,在浏览器中有这么几种序列化格式可选:
背景:父页面index.html里面有一个iframe,iframe的src为子页面(另一个html的链接),下文都是基于此情况下进行
在日常工作中,消息通信是一个很常见的场景。比如大家熟悉 B/S 结构,在该结构下,浏览器与服务器之间是基于 HTTP 协议进行消息通信:
本文实例讲述了PHP ajax跨子域的解决方案之document.domain+iframe。分享给大家供大家参考,具体如下:
如上图,在iframe子页面的<script>元素中,定义了taskStatus全局变量,如果希望在其父页面中获取该全局变量的值,则可在父页面的<script>元素中新增js脚本如下:
iFrame如果嵌入的是普通网页,这种场景下的iframe高度自适应解决方案,百度一下随手都能找到一大把。
做WEB前端开发的过程中,经常会有这样的需求,用户点击【编辑】按钮,弹出一个对话框,在里边修改相应的值,然后把修改后的值显示在原页面,最后点击保存。用window.parent.document.getElementById().setAttribute("value","")可以很好的解决这个问题。
大家好,又见面了,我是你们的朋友全栈君。 关于使用iframe跳转参数获取问题 怎么把URL参数传递到B页面的iframe的C页面里? A页面打开一个B页面的链接,怎么把A页面的URL参数传递到B页面
在父页面中定义函数,再到子页面中调用。 父页面parent.html function getFrameId(f){ var frames = document.getElementsByTagName(“iframe”); //获取父页面所有iframe for(i=0;i
本文主要会介绍如何基于MessengerJS,实现iframe父窗体与子窗体间的通信,传递数据信息。
同一域名下有两个页面parent.html,child.html。parent.html中通过iframe嵌入child.html。父页面触发自定义事件,子页面对其进行响应。 两页面代码如下: 1.parent.html
拿到这个对象,就可以根据正常网页的方法拿到嵌入(子)网页的文档高度,然后把值附给父页面的iframe的height。
在自己的项目中嵌入过广告的朋友们可能都用过百度联盟, 只需要嵌入如下一段js代码片段, 就可以在自己的项目中嵌入广告, 来获得收益. <script type=“text javascript”>
比如:a.html中,通过点击按钮等方式window.open出一个新的窗口b.html。那么在b.html中,就可以通过window.opener(省略写为opener)来引用a.html,包括a.html的document等对象,操作a.html的内容。
由于笔者2年前维护了几个比较老的项目是用jquery全家桶开发的,其中有些需求是需要跨页面交互和父子页面通信,故借此总结一下。另一块是前端实现文件下载功能,虽然方法很多,为了不用重复造轮子,在此还是总结一波,毕竟多页面下的应用场景还是很多的。
由于本文介绍的主要还是基于javascript,不涉及任何框架方面的问题(如果想研究vue,react,angular方面的技术问题,可以移步我的其他文章),所以让我们用原生javascript来解决我们上面提到的问题吧。
//共同引用的JS文件 common.js ; (function (window, $) { $(function ($) { window.trip = window.trip || {}; window.trip.name== window.trip.name || {}; })(window, $); //父页面 $(function(){ window.trip.name = $(this).find(".j-item-name");
注:window.frames("iframe的name")、document.frames("iframe的name")和window.frames["iframe的name"]、document.frames[""iframe的name"]的区别
https://gitee.com/ishouke/front_end_plugin/blob/master/jquery-3.2.1.min.js
jquery取得iframe中元素的几种方法 在iframe子页面获取父页面元素 代码如下: $('#objId', parent.document); // 搞定... 在父页面 获取iframe子页面的元素 代码如下: $("#objid",document.frames('iframename').document) $(document.getElementById('iframeId').contentWindow.document.body).html() 显示iframe中body
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。 HTML5引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。 应用程序缓存为应用带来三个优势:
既是发消息,就有发送方与接收方,发送方要调用 postMessage 方法,接收方要注册 onmessage 事件处理函数,处理接收的消息。
1."window.location.href"、"location.href"是本页面跳转
js页面跳转的问题(跳转到父页面、最外层页面、本页面)_javascript技巧_脚本之家 (jb51.net)
产品需求来啦:点击页面上某个东西,要在新窗口中打开一个页面,注意!要在新窗口中打开。你呵呵一笑,太简单了:
本文讲述了一种在新窗口中打开页面时需要注意的安全问题和解决方案。当使用window.open()在新窗口中打开页面时,可能会存在安全风险。例如,攻击者可以通过恶意脚本劫持新窗口中的页面,从而窃取用户的个人信息。为了防范这种安全风险,可以采用以下方法:使用noopener属性或window.open()并设置opner为空,这样新窗口将不会继承父窗口的任何属性。另外,也可以使用iframe来打开新窗口,并确保iframe中的内容安全。最后,如果必须在新窗口中打开页面,可以使用第三方库,如OpenURL,来避免安全风险。
在页面渲染时需要动态获取iframe子页面的高度,然后重新设置iframe高度,达到自适应的目的,但是由于iframe子页面中也涉及到访问其他系统的页面,这就使得页面渲染时无法获取子页面高度,这里涉及到跨域访问子页面问题。
width iframe的高度 height iframe的宽度 src iframe里面加载的页面url name 可以通过window.frames[name]获取到frame scrolling iframe里面的页面是否可以滚动 frameborder 是否显示iframe边框 1(显示)0(不显示) id 和其他的html标签id一样 在主页面中通过iframe标签可以引入其他子页面
同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢?
本文翻译自:http://www.mbsd.jp/blog/20160921.html ,有改动 原作者:プロフェッショナルサービス事業部 寺田 健 译者:Holic (知道创宇404安全实验室) 0x00 漏洞概述 漏洞简介 URL重定向漏洞有时会造成与上下文变量有关的漏洞,其导致的XSS便是常见的例子之一。本文所描述的漏洞在一年前提交至苹果官方,对应CVE-2016-4585,下面介绍这个漏洞的相关细节。 漏洞利用点 操纵请求中的Host头 Origin Confusion XSS 此外还可以盗取敏感
在vue父页面有两个个参数 名称和图标,需要把这两个参数传到iframe的地图里面,在地图触发绘点事件的时候,获取到传来的参数并且展示
Extjs的窗口是可以加载自己的HTML的,但这样两个页面就相当独立了,传参是个问题 ,网上也没有很好的解答清楚,猫猫今天就说清楚这个模式的传参要点。
早期单进程架构是页面渲染和网络下载都是运行在同一个浏览器主进程中,而dom/com解析,js脚本执行,图像输出,插件运行都运行在同一个线程中,这样也带来了一系列的问题:
PlainBashC++C#CSSDiffHTML/XMLJavaJavascriptMarkdownPHPPythonRubySQL
天气降温,大家注意保暖~~~ 因为学习了腾讯课堂NEXT学院的前端进阶课程,所以打算把课程内容都总结一遍。有些都是很普通很常见的知识,但是为了巩固自己的知识面,梳理自己的知识树,所以每个知识点都会写成文章,所有文章都会放在公众号右下角的前端进阶课程总结中~~~也希望能够帮助到需要的人~~ 跨域的东西, 简直不要接触太多,网上相关内容一抓一大把,但是突然学习到一个关于前端解决跨域的方式 就是 利用 iframe 不管你有没有了解过,反正我没有 我觉得很有用并且容易忘,所以我记录下来哈哈哈 下面
作为前端,一直以来都知道HTTP劫持与XSS跨站脚本(Cross-site scripting)、CSRF跨站请求伪造(Cross-site request forgery)。但是一直都没有深入研究过,前些日子同事的分享会偶然提及,我也对这一块很感兴趣,便深入研究了一番。 最近用 JavaScript 写了一个组件,可以在前端层面防御部分 HTTP 劫持与 XSS。 当然,防御这些劫持最好的方法还是从后端入手,前端能做的实在太少。而且由于源码的暴露,攻击者很容易绕过我们的防御手段。但是这不代表我们去了解这块
通常我们可以使用 Object.prototype.toString 方法进行判断,详细可以查看《Object.prototype.toString() - MDN - Mozilla》。
跨域详解 Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257 目录导航 跨域详解 1. 概念 2. 跨域资源共享(CORS) 3. jsonp跨域 3.1 概念 3.2 实现 3.3 jQuery封装操作 3.4 JSONP优缺点 CORS 与 J
这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。
网课结束了啊哈哈哈哈哈哈...咳咳咳...呜呜呜... 这段时间在积极备考呢,英国考试局把毕业前最后一次全球统考取消了,改为学校评估成绩并采用专业科学严谨的数据模型分析学校提交成绩的可信度做出调整并公布最终成绩,学校无法胡作非为。于是还是需要参加老师自行出题的模考和期末考试了...
跨域的东西, 简直不要接触太多,网上相关内容一抓一大把,但是突然学习到一个关于前端解决跨域的方式
该方法是HTML5引入的API,可以通过异步方式实现跨源通信,多用于窗口间数据通信。它提供了一种受控机制来规避不同源脚本无法通信的限制,只要正确使用,这种方法很安全。
1.父页面调用子页面函数,选择iframe的id + contentWindow +子页面的函数名([参数列表])
一、目录: ---- ---- 1.ready(function(){})方法的使用 2.require最常用的方法: 3.display:none 4.visible:hidden 5.修改span的字体的颜色 6.window对象中self、 top 的区别 7.blur事件的使用 二.、内容: 1. ready(function(){}) ```$(document).ready(function(){ // 当网页加载完成后执行这里的代码块 });``` 2.require('http') 内置模块
页面监听hashchange事件,然后父页面改变哈希,子页面读取哈希来实现通信。但是这有一个问题,如果传递的信息过多,那就会导致url很长,而且维护起来也麻烦。更严重的问题是,如果页面本身有利用哈希的逻辑,将会无解
web开发实现页面的局部刷新的技术,除了比较常见的ajax,还有通过iframe来实现,这种方式和ajax有什么不同呢首先看一个用ajax技术实现的页面局部刷新的效果——表单登陆。 情况1.不输入用户名,登陆失败。 情况2.输入用户名,密码正确,登陆成功。 上面的效果实现起来很简单,无非就是给按钮绑定点击事件,事件里发送一个ajax请求,请求完成后,回调函数根据返回结果,再操作dom元素。 那同样的表单登陆,用iframe如何实现呢? 先看前端页面的代码: <!DOCTYPE html> <html l
沙箱,即sandbox,顾名思义,就是让你的程序跑在一个隔离的环境下,不对外界的其他程序造成影响,通过创建类似沙盒的独立作业环境,在其内部运行的程序并不能对硬盘产生永久性的影响。 举个简单的栗子,其实我们的浏览器,Chrome 中的每一个标签页都是一个沙箱(sandbox)。渲染进程被沙箱(Sandbox)隔离,网页 web 代码内容必须通过 IPC 通道才能与浏览器内核进程通信,通信过程会进行安全的检查。沙箱设计的目的是为了让不可信的代码运行在一定的环境中,从而限制这些代码访问隔离区之外的资源。
在项目中,我们常常遇到跨域的问题,虽然在你的项目里,脚手架已经100%做好了本地代理、或者运维老铁在nginx中也已经给你做了接口代理,所以你遇到跨域的概率会少了很多,但是在传统的项目中,在那个jquery的横行时代,或者你接手了一个祖传项目时,跨域问题会是时有发生,本文只做笔者了解跨域的通用解决方案,希望在实际项目中对你有些思考和帮助。
例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:
摘要总结:本篇文章主要介绍了在EasyUI中如何通过内嵌iframe实现tab页跳转以及如何在iframe子页面中调用父页面的方法。同时还提到了在tab页中如何实现新增同级tab页并刷新tab页。
领取专属 10元无门槛券
手把手带您无忧上云