如何在加载iframe后从缓存中读取iframe的*原始*源 - 腾讯云开发者社区

alert("这是手机"); if(document.body.clientWidth>window.screen.width){ // alert("屏幕是横着放的"...); if($(".lesson-content-text-body")){ alert('为了更好的用户体验，请将手机垂直放置浏览课程');...}else{ if($(".lesson-content-text-body")){ if($(".lesson-content-text-body iframe...").attr("width")){ $(".lesson-content-text-body iframe").attr("width", 240);...$(".lesson-content-text-body iframe").attr("height",160); }else{ sleepcheckvideo

1.5K1 0

web messaging与Woker分类：漫谈postMessage跨线程跨页面通信

但是，验证身份后，您仍然应该始终验证接收到的消息的语法。否则，您信任只发送受信任邮件的网站中的安全漏洞可能会在您的网站中打开跨网站脚本漏洞。...除了无法读取DOM对象(包括：document、window、parent)、本地文件、对话框(alert/confirm/prompt)，大部分 window 对象的方法和属性是可以使用的，如： WebSockets...Broadcast Channel：可以实现同源下浏览器不同窗口，Tab页，frame或者 iframe 下的浏览器上下文 (通常是同一个网站下不同的页面)之间的简单通讯。...data 包含任意字符串数据，由原始脚本发送 origin 一个字符串，包含原始文档的方案、域名以及端口(如：http://domain.example:80) lastEventId 一个字符串，包含了当前的消息事件的唯一标识符...manifest 缓存已经被废弃，因为他的设计有些不合理的地方，他在缓存静态文件的同时，也会默认缓存html文件。这导致页面的更新只能通过manifest文件中的版本号来决定。

2K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何进行渗透测试XSS跨站攻击检测

从Gecko 1.9开始，文件使用了更细致的同源策略，只有当源文件的父目录是目标文件的祖先目录时，文件才能读取另一个文件。...服务端收到请求后，动态生成脚本产生数据，并在代码中以产生的数据为参数调用callback函数。 3.2.2.3.2....跨源脚本API访问 Java的APIs中，如 iframe.contentWindow , window.parent, window.open 和 window.opener 允许文档间相互引用。...跨源数据存储访问存储在浏览器中的数据，如 localStorage 和 IndexedDB，以源进行分割。每个源都拥有自己单独的存储空间，一个源中的Java脚本不能对属于其它源的数据进行读写操作。...预加载浏览器为了增强用户体验，让浏览器更有效率，就有一个预加载的功能，大体是利用浏览器空闲时间去加载指定的内容，然后缓存起来。

2.6K3 0

前端性能监控

以往说到性能优化大家会认为是网页加载速度的快与慢，其实性能的好与坏也可以约等于用户使用的效率，同样的下面这些：页面滚动是否平滑点击按钮后响应是否够快动画是否流畅，关键内容是否优先被加载（参考 YouTube...[RESOURCE-TIMING-2] Resource-Timing-2 支持获取文档中资源加载情况，包括图片，XHR 请求，iframe，script，embed，link，样式，svg。...注意点：同一个 URL 出现在图片元素的 src 中，由于浏览器不会重复请求两个同样的文件（从缓存中读取），所以最终你只会获得一条关于这个图片资源的性能数据如果使用 JS 去改变原始图片的 src...一个链接发送了两次 XMLHttpRequest 请求，也会被记录下来 iframe 嵌套 iframe 的情况，只会保存父节点的 iframe src 的性能记录，子 iframe 的将会被保存在父容器...支持 PerformanceMark和 PerformanceMeasure两个 API 在 Web Worker 中使用如何在代码中衡量性能？

1.4K2 0

网页加速特技之 AMP

AMP HTML 组件自定义组件 AMP HTML 自定义5个组件： amp-ad、amp-embed、amp-img、amp-pixel、amp-video 组件直接以标签的形式进行使用，如页面中需要加载...使用Google AMP Cache，页面、JS文件、图片等都是从同一个源获取，并且使用HTTP2.0来优化性能。这个缓存机制还带有的验证系统，以确保网页不受外部资源的限制，能随时随地正常运行。...AMP把文档和资源分开布局，避免样式重新计算和布局，资源加载完成后不会重新布局。...如果第三方JS触发多个样式重计算，iframe中也只有很少一部分DOM，重新布局不会消耗很多性能。 5.CSS必须内联，内联样式表最大50kb CSS会阻塞页面渲染，阻塞页面加载。...AMP限制：网络限制，如AMP JS、AMP Components 必须从 cdn.ampproject.org 加载；Web Font 必须从 fonts.googleapis.com 加载，这些源网站在国内访问速度很慢甚至直接被墙

4.6K8 2

Web安全(一)---浏览器同源策略

注：IE 未将端口号加入到同源策略的组成部分之中在浏览器中, 、、、等标签都可以跨域加载,而不受浏览器的同源策略的限制, 这些带src属性的标签每次加载的时候...,实际上都是浏览器发起一次GET请求, 不同于普通请求(XMLHTTPRequest)的是,通过src属性加载的资源,浏览器限制了JavaScript的权限,使其不能读写src加载返回的内容浏览器同源策略中...Session Storage、Local Storage、Cache、Indexed DB #1.2.2 DOM 来自一个源的js只能读写自己源的DOM树不能读取其他源的DOM树 #1.2.3 异步请求...当然其实本质是，一方面浏览器发现一个源的js向其他源的接口发送请求时会自动带上Origin头标识来自的源，让服务器能通过Origin判断要不要向应；另一方面，浏览器在接收到响应后如果没有发现Access-Control-Allow-Origin...cookies),该值只能是true,否则不返回 Access-Control-Max-Age: 1800 //预检结果缓存时间,也就是上面说到的缓存，单位：秒 Access-Control-Allow-Methods

3.9K3 0

新的浏览器缓存策略变更：舍弃性能、确保安全

Cache Key: { https://x.example/doge.png } 图像是否从 iframe 中加载都没有关系。...再次查看前面的示例，以了解缓存分区如何在不同的上下文中工作： ?...的 iframe 中加载，在这种情况下，图像是从网络上下载的，因为缓存中找不到相同的密钥。...由于密钥是从 https://a.example 加载资源的顶部 frame 和直接frame （https://c.example）获取的，因此会发生缓存命中。...下面是一些性能指标的变化：整体缓存未命中率增加了约 3.6％ FCP 增加约 0.3％从网络加载的字节的总体比例增加了约 4％其他浏览器的行为 Chrome: 使用顶级 scheme://eTLD

1K2 1

JavaScript中的沙箱机制探秘:iFrame沙箱实现方案详解

因此我们可以猜测，表单提交后，后台对用户提交的依赖库、html、css和js代码按顺序进行了拼接并返回结果（当然还有一系列安全措施如CSRF Token的处理等），剩余的一切（包括加载外部js、执行用户提交的...()，target="_blank"等； allow-scripts: 允许iframe中执行js代码； allow-same-origin: 允许iframe中的文档包括自己的源。...在读取web服务页面后导航至与Host同源页面，此时第二次触发iframe的onload方法，window.name不变，而同域下Host也可取得其值，便达到了跨域传递消息的目的。...nav中的链接来切换iframe中加载的app了。...通过Host首页加载openAPI test，指定好参数后请求从iframe中发出，在Host页面上显示参数，随后经由后台发往阿里云web service，再将返回结果发送给app，最后app在控制台输出

4.3K1 0

墨瞳漫画h5一期 vuejs总结

前言博主也是vuejs萌新，公司仅我一个前端，收到做h5的需求后，马上想到要用下vuejs，于是说服领导，开始慢慢钻研，现在记录一下踩到的坑。...构建单页面大型应用的话，肯定要开启组件的缓存的，因为一般会要求后退的时候不要重新加载页面，而且要记住原始的滚动位置。...: 从m.cm233.com 到 m.cm233.com/book,再返回到m.cm233.com，这时浏览器跳到了当时记录的位置，但是再前进到/book时，浏览器还是会停在首页的那个位置上，这个bug...其中过渡动画写在img-loaded这个class里 /*简单的透明度渐入，图片加载完成后会删掉这个class，以防router切换缓存页面时再次引起动画*/ .img-loaded { animation...用在router中 components 小组件们 vuex vuex app.vue main.js 另外，可以修改下生成的静态文件，vue-cli默认声称的静态文件时间戳是加在文件名上的，如app.fefdfd7s8f78sd7

1.1K1 0

前端常见的跨域方式

我们都知道，HTML 中的 src 属性是不受同源策略约束的，script 标签的 src 可以链接任何不同源的（当然，除非你的服务器设置了 CSP 头部可能会受到影响）脚本，img 标签的 src 也可以加载外部的图片...> b.html 可以加载出来，现在有个需求，让 a 页面与 b 页面进行通信。...对象，第二个参数是 iframe 的源 frame.onload = function(){ // 子文档加载完成后才能发消息 frame.contentWindow.postMessage..." id="iframe"> document.domain = "example.cn"; // 指定原始域 var a = 123; const...~~~"; 运行后，abc.example 网页中是能获取到 temp 变量的。

1.4K2 0

百度前端二面常考面试题

⽤户打开⽬标⽹站时，⽹站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。⽤户浏览器接收到响应后解析执⾏，混在其中的恶意代码也被执⾏。...三者的区别如下：script 立即停止页面渲染去加载资源文件，当资源加载完毕后立即执行js代码，js代码执行完毕后继续渲染页面；async 是在下载完成之后，立即异步加载，加载好后立即执行，多个带async...如果资源发生了修改，则返回修改后的资源。协商缓存也可以通过两种方式来设置，分别是 http 头信息中的Etag 和Last-Modified属性。...页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame();...不同的任务源会被分配到不同的 Task 队列中，任务源可以分为微任务（microtask）和宏任务（macrotask）。

9271 0

Comet：基于 HTTP 长连接的“服务器推”技术

将“服务器推”应用在 Web 程序中，首先考虑的是如何在功能有限的浏览器端接收、处理信息：客户端如何接收、处理信息，是否需要使用套接口或是使用远程调用。...最近几年，因为 AJAX 技术的普及，以及把 IFrame 嵌在“htmlfile“的 ActiveX 组件中可以解决 IE 的加载显示问题，一些受欢迎的应用如 meebo，gmail+gtalk 在实现中使用了这些新技术...同样的思路用在 iframe 方案的客户端，iframe 服务器端并不返回直接显示在页面的数据，而是返回对客户端 Javascript 函数的调用，如“<script type="text/javascript...使用 iframe 请求一个长连接有一个很明显的不足之处：IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成，而且 IE 上方的图标会不停的转动，表示加载正在进行。...Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题，并将这种方法用到了 gmail+gtalk 产品中。

2.5K3 0

Comet：基于 HTTP 长连接的“服务器推”技术

最近几年，因为 AJAX 技术的普及，以及把 IFrame 嵌在“htmlfile“的 ActiveX 组件中可以解决 IE 的加载显示问题，一些受欢迎的应用如 meebo，gmail+gtalk 在实现中使用了这些新技术...Mozilla Firefox 提供了对 Streaming AJAX 的支持，即 readystate 为 3 时（数据仍在传输中），客户端可以读取数据，从而无须关闭连接，就能读取处理服务器端返回的信息...同样的思路用在 iframe 方案的客户端，iframe 服务器端并不返回直接显示在页面的数据，而是返回对客户端 Javascript 函数的调用，如“<script type="text/javascript...使用 iframe 请求一个长连接有一个很明显的不足之处：IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成，而且 IE 上方的图标会不停的转动，表示加载正在进行。...Google 的天才们使用一个称为“htmlfile”的 ActiveX 解决了在 IE 中的加载显示问题，并将这种方法用到了 gmail+gtalk 产品中。

2.1K7 0

高级前端面试题汇总_2023-02-27

优点：用来加载速度较慢的内容（如广告）可以使脚本可以并行下载可以实现跨子域通信缺点： iframe 会阻塞主页面的 onload 事件无法被一些搜索引擎索识别会产生很多页面，不容易管理代码输出结果...(同域proxy页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame...操作系统通过信号来通知进程系统中发生了某种预先规定好的事件（一组事件中的一个），它也是用户进程之间通信和同步的一种原始机制。...DNS的域名查找，在客户端和浏览器，本地DNS之间的查询方式是递归查询；在本地DNS服务器与根域及其子域之间的查询方式是迭代查询；图片在客户端输入 URL 后，会有一个递归查找的过程，从浏览器缓存中查找...若未用转发模式，则迭代查找过程如下图：图片结合起来的过程，可以用一个图表示：图片在查找过程中，有以下优化点： DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，

1.6K2 0

Web 性能优化-首屏和白屏时间

，个人认为，只要首屏中的图片加载完成，即是首屏完成，不在首屏中的图片可以不考虑。...requestStart: HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存。...responseStart: HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存。...responseEnd: HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存。...domContentLoadedEventEnd: DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）。

2.4K2 0

腾讯前端一面常考面试题_2023-03-13

（5）当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。（6）站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。...从而去决定你是304读取缓存还是给你返回最新的数据函数柯里化柯里化（currying）指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只接受一个参数。...预检请求使用的请求方法是OPTIONS，表示这个请求是来询问的。他的头信息中的关键字段是Orign，表示请求来自哪个源。...页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame();....'); });});懒加载的概念懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。

1K4 0

有哪些前端面试题是面试官必考的_2023-03-15

然后当浏览器在解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。...但是不管是从 Memory Cache 中还是从网络请求中获取的数据，浏览器都会显示是从 Service Worker 中获取的内容。...Disk Cache： Disk Cache 也就是存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。...属性的独特之处：name值在不同的页面（甚至不同域名）加载后依旧存在，并且可以支持非常长的 name 值（2MB）。...页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame();

1.1K3 0

史上最全跨域总结

加载其他域下的文件（nealyang.cn/1.html）, 同时 document.domain 设置成 nealyang.cn ，当 iframe 加载完毕后就可以获取 nealyang.cn...他的神器之处在于name值在不同页面或者不同域下加载后依旧存在，没有修改就不会发生变化，并且可以存储非常长的name(2MB) 假设index页面请求远端服务器上的数据，我们在该页面下创建iframe标签...，该iframe的src指向服务器文件的地址（iframe标签src可以跨域），服务器文件里设置好window.name的值，然后再在index.html里面读取改iframe中的window.name...的子窗口是不能通信的，因为同源策略，所以改变子窗口的路径就可以了，将数据当做改变后的路径的hash值加载路径上，然后就可以通信了。...同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie

1.8K4 0

美团前端常考面试题指南_2023-03-02

预检请求使用的请求方法是OPTIONS，表示这个请求是来询问的。他的头信息中的关键字段是Orign，表示请求来自哪个源。...(同域proxy页)成功后，读取同域window.name中数据 callback(iframe.contentWindow.name); destoryFrame...; 通过iframe的src属性由外域转向本地域，跨域数据即由iframe的window.name从外域传递到本地域。...提取公共第三⽅库: SplitChunksPlugin插件来进⾏公共模块抽取,利⽤浏览器缓存可以⻓期缓存这些⽆需频繁变动的公共代码懒加载的特点减少无用资源的加载：使用懒加载明显减少了服务器的压力和流量...在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如： const a

6723 0

【前端编程】加载第三方JS的各种姿势

从网站开发者的角度来看，第三方JS相比第一方JS有如下几个不同之处：下载速度不可控 JS地址域名与网站域名不同文件内容不可控不一定有强缓存（Cache-Control/Expires）如果你的网站上面有很多第三方...按照互联网守则：网站加载速度越慢，用户流失越多所以要考虑下如何在有很多第三方JS的情况下，保证他们不影响到网站自己的加载速度。我们可以异步加载这些第三方JS代码。...第三方JS文件一般是不同域名的且JS内容不可控，所以此方法就不适用了 iframe中加载JS – 将你的JS文件直接放到另一个页面的HTML中，然后将此页面URL地址作为iframe标签src属性。...此方法需要增加一次页面请求，而且因为是在iframe内部执行了，第三方JS文件本身也需要修改，故并不是很适用先缓存再执行 – 利用JS文件的强缓存，先使用new Image().src = 'http...还有另一个好处：第三方的Javascript代码在独立的iframe中运行，不会与主页面中的JS相互干扰。

4.1K9 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

根据屏幕尺寸重写iframe中video的尺寸-当页面需要全部加载后才能判断的情况

web messaging与Woker分类：漫谈postMessage跨线程跨页面通信

如何进行渗透测试XSS跨站攻击检测

前端性能监控

网页加速特技之 AMP

Web安全(一)---浏览器同源策略

新的浏览器缓存策略变更：舍弃性能、确保安全

JavaScript中的沙箱机制探秘:iFrame沙箱实现方案详解

墨瞳漫画h5一期 vuejs总结

前端常见的跨域方式

百度前端二面常考面试题

Comet：基于 HTTP 长连接的“服务器推”技术

Comet：基于 HTTP 长连接的“服务器推”技术

高级前端面试题汇总_2023-02-27

Web 性能优化-首屏和白屏时间

腾讯前端一面常考面试题_2023-03-13

有哪些前端面试题是面试官必考的_2023-03-15

史上最全跨域总结

美团前端常考面试题指南_2023-03-02

【前端编程】加载第三方JS的各种姿势

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐