这段时间在工作中遇到一个看似较为棘手的问题。问题描述：查询报表页面分为上下两部分，上部分为条件输入区域，下部分为报表展示区域。...'), self = this; //object在ie11上onload方法不能执行 //区元素，绝对定位（父级必须是相对定位，否则参考到body了），四个为0，width、height...$object); } 在此处，为了做到兼容IE11（因为Ie11不支持attacheEvent方法，所以也会被判断为现代浏览器），本人创建的DOM，不是使用的object而是使用的...iframe，因为在IE下object的onload事件不能触发，而iframe的可能有；并且iframe的边框一定要去掉，否则影响判断。...，使用了getComputedStyle和currentStyle实现的，这民是标准的方法。
不同的人负责的东西同时展示在页面上交互，那么两个前端开发的过程中必然有联调的过程 背景：父页面index.html里面有一个iframe，iframe的src为子页面(另一个html的链接)，下文都是基于此情况下进行...，并通过它的两个MessagePort 属性发送数据，而且在 Web Worker 中可用。...，既然contentWindow是iframe自己的window，那么我们就可以随意注入任何内容，供iframe调用了。...前端和客户端联调，常用的方法之一就是注入函数。...(); }, 1000); }; 复制代码 下面，基于给iframe的window注入方法，来设计一个简单的通信模块 父页面主动调子页面， 子页面被父页面调 父页面被子页面调，子页面调父页面
例如：a.b.test.com 中某个文档的 document.domain 可以设成a.b.test.com（自身）、b.test.com（上一级父域） 、test.com（上上一级父域）中的任意一个...= 'none'; document.body.appendChild(iframe); //监听 iframe 的两次加载 iframe.onload = function () { if...），就执行回调函数，通过修改 src 让页面跳转到 b.html（这时候 window.name 的值传递给了 b.html），第二次触发执行回调函数，将最初的数据传递给 a.html。...注意两个地方： 由于整个过程是悄悄进行的，我们给 iframe 设置 display:none 拿到数据后记得销毁 iframe，防止内存泄露 上面的写法不需要重写 onload 回调函数，只用一个 flag...标识第一和第二次加载；我们也可以采用下面的方法重写 onload 回调： iframe.onload = function () { iframe.onload = function(){
使用时需要注意，performance的相关操作，最好放在onload的回调中执行，避免出现异常的bug. process,onload 这里的过程其实就和开头的时候说的一样 (1) 解析HTML结构。...如果你的js文件涉及DOM操作，可以直接在DOMContentLoaded里面添加回调函数，或者说基本上我们的js文件都可以写在里面进行调用....另外提供一个doScroll方式 doScroll兼容 这是IE低版本特有的，不过IE11已经弃用了。...我们来看一下jquery中实现doScroll的兼容: //低版本的IE浏览器，这里添加监听作为向下兼容，如果doScroll执行出现bug，也能保证ready函数的执行 document.attachEvent...//在ready里面会对执行做判断，确保只执行一次 var top = false; // 如果是IE且不是iframe就通过不停的检查doScroll来判断dom结构是否ready
（HTML注入–标签闭合）当输入的payload，被插入到以下标签的内部时，使用以下标签：iframe...被插入到javascript标签块时，使用第一个或第二个payload，该值如果位于字符串分隔值或在单个逻辑代码块（如函数或条件（ if，else，等等中）。...)当输入的payload被插入到反引号 （``）分隔的字符串内或模板引擎中时使用。...向量)以下payload它可以在 Firefox上触发，但是通过在 中添加 attributename=x参数也可以在 Chromium中工作。...for XSS (PHP xss过滤)以下代码只用于阻止每个上下文中的xss，只要输入不返回在非分隔字符串、反勾号中间或任何其他类似于 eval的函数（JS上下文中的所有函数）中。
然而，在以下情况中，请使用 POST 请求： 无法使用缓存文件（更新服务器上的文件或数据库） 向服务器发送大量数据（POST 没有数据量限制） 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠...事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。...膜拜，更关键的一点是不能少了回调函数。...,增加个什么东西了都会重新加载这个标签,但是还有个问 //题第一次加载iframe标签的时候就触发onload事件了,但是事件对应的函数代码 //却还没有加载上这个时候就会报错，解决方案如上...不然在客户端容易出现函数名冲突的问题。
实际上，我们根本不需要通过Resource Hacker来查找有效资源，因为二进制文件中的默认资源都有固定不变的值。...如果该事件被触发了一次，则说明目标文件存在；如果被触发了两次，则说明该文件不存在。 关键代码如下所示，如果你愿意的话，你也可以直接下载一个可用的PoC 下载地址 - 密码：infected。...首先，让我们来看一看攻击者是怎么实现的。关键代码如下图所示： ? 在这里，恶意软件的作者使用了三种不同的技术来检测某一本地文件是否存在，但是漏洞现在已经被微软修复了。...我直接告诉你吧，我们所要寻找的函数名为“IsIEResourcePage”。 ?...我在这里要跟大家分享一个小秘诀：当你在研究的过程中，最好使用window.open方法来修改iframe的location，尽量不要使用iframe.location。
网页开发者们想了很多办法，试图提升文件上传的功能和操作体验，在各种Javascript库的基础上，开发了五花八门的插件。...在HTML5没有出现之前，只能使用iframe做到这一点。用户点击submit时，动态插入一个iframe元素（以下代码使用了jQuery函数库）。 ...其次，它在action属性指定的上传网址的后面，添加了一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从iframe窗口传到上层页面。...这是真正的"异步上传"，是将来的主流。上一节的iframe上传，可以用作老式浏览器的替代方案。...ajax上传代码，放在表单的submit事件回调函数中： form.on('submit',function() { // 此处进行ajax上传 }); 我们主要用的是FormData
这时，我们就要考虑是否可以等iframe加载完后再执行后边的操作，当然，各种浏览器早就为我们考虑到啦，看下面：ie浏览器IE的每个elem节点都会拥有一个onreadystatechange事件，这个事件每次在...elem内容发送变化的时候触发，比如内容正在载入loading会触发，内容载入完毕loaded会触发，内容载入成功complete会触发，这个函数还需要配合readyState，这是ie上每个elem都拥有的属性...arguments.callee);//这里是回调函数}});其他浏览器：Firefox,Opera,chrome等在其他非IE的浏览器上 Firefox,Opera,chrome等 iframe 都会拥有一个...//要清除掉事件iframe.detachEvent("onreadystatechange", arguments.callee);//这里是回调函数}});}else{iframe.addEventListener...}, false);}需要注意的是：上面的函数必须放在 iframe 被appendChild到body后，否则无法被触发。
：跨域资源共享(CORS) 是一种机制，它使用额外的 HTTP 头来告诉浏览器 让运行在一个 origin (domain)上的Web应用被准许访问来自不同源服务器上的指定的资源。...(已失败)2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调resolve和失败时的回调reject；另外resolve的参数除了正常值以外， 还可能是一个...// 实践中要确保 onFulfilled 和 onRejected ⽅方法异步执⾏行行，且应该在 then ⽅方法被调⽤用的那⼀一轮事件循环之后的新执⾏行行栈中执⾏行行。...虽然捕获阶段在规范中规定不允许响应事件，但是实际上还是会执行，所以有两次机会获取到目标对象。的是类型是否在实例的原型链上。constructor是prototype上的属性，这一点很容易被忽略掉。
网页开发者们想了很多办法，试图提升文件上传的功能和操作体验，在各种Javascript库的基础上，开发了五花八门的插件。...在HTML5没有出现之前，只能使用iframe做到这一点。用户点击submit时，动态插入一个iframe元素（以下代码使用了jQuery函数库）。 ...其次，它在action属性指定的上传网址的后面，添加了一个参数，使得服务器知道回调函数的名称。这样就能将服务器返回的信息，从iframe窗口传到上层页面。...这是真正的”异步上传”，是将来的主流。上一节的iframe上传，可以用作老式浏览器的替代方案。...ajax上传代码，放在表单的submit事件回调函数中： form.on(‘submit’,function() { // 此处进行ajax上传 }); 我们主要用的是FormData对象
的东西。这个东西像是 JavaScript 中的函数调用。...JSONP 函数需要一个 URL，需要一个对象，用来构建查询参数；需要一个回调函数名，为了拿到后端发来的数据； jsonp({ path: "https://www.baidu.com/sugrec...在 a.html 中写入脚本： const frame = document.getElementById("iframe"); // frame.contentWindow 就是子文档的 window...script> document.domain = 'example.cn'; // 指定原始域 // temp 变量被挂载在 window 上 var temp = "hello...，就是上面代码中的 key 变量，这是因为 src 改变后会再次触发 load 事件，load 事件里又被重新设置 src 属性值，没完没了，我们只要让 load 事件触发两次就行了，第二次出发时，加载的是同源下的
在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...如果处理函数绑定给 window 对象，则会在所有内容(包括窗口、框架、对象和图像等)加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。...在本例中每间隔 50 毫秒尝试去执行 doScroll，注意，由于页面没有加载完成的时候，调用 doScroll 会导致异常，所以使用了 try -catch 来捕获异常。...()方法 请注意，如果事件已经被触发，回调将不会被执行。
0x01 具备src的标签 原理：所有具有src属性的HTML标签都是可以跨域的 在浏览器中，、、iframe>和这几个标签是可以加载跨域（非同源）的资源的，并且加载的方式其实相当于一次普通的...0x02 JSONP跨域 原理：是可以跨域的，而且在跨域脚本中以直接回调当前脚本的函数 script标签是可以加载异域的JavaScript并执行的，通过预先设定好的callback函数来实现和母页面的交互...原来就是这个callback函数，对它的使用有一个典型的方式，就是通过JSON来传参，即将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。JSONP只支持GET请求。...php $callback = $_GET['callback'];//得到回调函数名 $data = array('a','b','c');//要返回的数据 echo $callback.'('.json_encode...www.a.com下的a.html想和www.b.com下的b.html通信（在a.html中动态创建一个b.html的iframe来发送请求） 但是由于“同源策略”的限制他们无法进行交流（b.html
4) JSONP的实现流程 声明一个回调函数，其函数名(如show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的data)。...创建一个 标签，把那个跨域的API数据接口地址，赋值给script的src,还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）。...最后服务器把准备的数据通过HTTP协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。...在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP函数。...// 第2次onload(同域b.html页)成功后，读取同域window.name中数据 console.log(iframe.contentWindow.name);
JSONP 的实现流程 声明一个回调函数，其函数名(如 show)当做参数值，要传递给跨域请求数据的服务器，函数形参为要获取目标数据(服务器返回的 data)。...创建一个script标签，把那个跨域的 API 数据接口地址，赋值给 script 的 src,还要在这个地址中向服务器传递该函数名（可以通过问号传参:?callback=show）。...最后服务器把准备的数据通过 HTTP 协议返回给客户端，客户端再调用执行之前声明的回调函数（show），对返回的数据进行操作。...在开发中可能会遇到多个 JSONP 请求的回调函数名是相同的，这时候就需要自己封装一个 JSONP 函数。...// 第2次onload(同域b.html页)成功后，读取同域window.name中数据 console.log(iframe.contentWindow.name);
在创建新的FileReader对象之后，我们建立了onload函数，然后调用readAsDataURL()开始在后台进行读取操作。...当图像文件加载后，转换成一个 data: URL，并传递到onload回调函数中设置给img的src。...有了这些事件回调，我们也可以在不同的事件给我们UI元素添加不同的class来实现更好交互效果。 好了，一个比较优雅的上传组件可以进入生产模式了。什么？还要支持IE9？...那我们为什么还要用iframe呢？ 因为在现代浏览器中我们可以用XMLHttpRequest Level 2来支持二进制数据，异步文件上传，并且动态创建FormData。...导致iframe的onload回调里的访问服务返回的数据失败。 这时我们再祭出JSONP这把利剑，来解决跨域问题。首先在上传之前注册一个全局的函数，把函数名发给服务器。
但是我们可以使用 Message Event 来进行父子应用之间的通信，通过这个我们可以基于 URL 向其他浏览器发送消息，在我们现在这种情况下，我们可以从 iFrame 向可能在不同域上的父应用发送消息...首先，我们在 iFrame 内添加一个立即执行函数。在这个函数中，我们添加一个消息事件监听器，这个监听器会在从父级应用程序调用时触发。...然后，我们通过 parent.postMessage() 方法向父应用发送一条消息；在 iFrame 中，parent 是一个隐含的对象。 函数，它接受iframeUri和一个回调函数，在收到结果后将被调用。...，并提供一个回调函数来为用户呈现适当的消息。
（5）异步http请求线程XMLHttpRequest连接后通过浏览器新开一个线程请求；检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放入事件队列中，等待JS引擎空闲后执行...每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。...最后来看 Node 中的 process.nextTick，这个函数其实是独立于 Event Loop 之外的，它有一个自己的队列，当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数...在中间⼈攻击中，攻击者可以拦截通讯双⽅的通话并插⼊新的内容。攻击过程如下:客户端发送请求到服务端，请求被中间⼈截获服务器向客户端发送公钥中间⼈截获公钥，保留在⾃⼰⼿上。...)上的Web应用被准许访问来自不同源服务器上的指定的资源。
需求是这样的，在我的页面点击一些按钮，要实时反馈到iframe子页面，子页面再进行响应。 当时脑子里第一时间想到的解决方案是：用NGINX把两个项目代理到同一域名下。...关于postMessage的详细介绍请戳这里，不过MDN的文档太详细了，导致有些同学看完还是一脸懵逼，下面我们就来看看怎么用postMessage实现iframe跨域通信，当你会用了之后再回去看文档，感觉是完全不同的...message iFrame.onload = function(){ //iframe加载完立即发送一条消息 iFrame.contentWindow.postMessage('MessageFromIndex1...','*'); } 我们知道postMessage是挂载在window对象上的，所以等iframe加载完毕后，用iFrame.contentWindow获取到iframe的window对象，然后调用...，来看看打印出来的event： event对象中的data属性存放着我们从父页面传过来的数据，就这么简单！
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
