首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何防止iframe在使用appendChild将其移动到不同的父级时重新加载

为了防止iframe在使用appendChild将其移动到不同的父级时重新加载,可以采取以下方法:

  1. 使用cloneNode方法:在移动iframe之前,先使用cloneNode方法创建一个iframe的副本,并将副本添加到目标父级中。然后再从原始父级中移除iframe。这样可以避免重新加载。
  2. 使用visibility属性:在移动iframe之前,将其visibility属性设置为hidden,然后再将其添加到目标父级中。最后再将visibility属性设置为visible。这样可以防止重新加载,并且在移动完成后显示iframe。
  3. 使用CSS样式:在移动iframe之前,将其position属性设置为absolute,并使用top和left属性将其定位到目标位置。然后再将其添加到目标父级中。这样可以避免重新加载,并且保持iframe在目标位置。
  4. 使用数据缓存:在移动iframe之前,可以使用localStorage或sessionStorage等数据缓存技术将iframe的内容保存下来。然后再将其添加到目标父级中,并将保存的内容重新加载到iframe中。这样可以避免重新加载,并且保持iframe的内容不变。

需要注意的是,以上方法只是一些常用的防止iframe重新加载的技巧,具体的实现方式还需要根据具体的场景和需求进行调整。另外,腾讯云提供了一系列与云计算相关的产品,如云服务器、云数据库、云存储等,可以根据具体需求选择适合的产品进行使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

网页内容加速黑科技趣谈

但在同一个 tab 下浏览页面,他们用 JavaScript 重新实现了导航(navigation)功能,类似下面这样: // …一堆重新实现浏览器导航功能代码… const response =...= 'none'; document.body.appendChild(iframe); // 等待 iframe 加载: iframe.onload = () => { // 忽略其他 onload...是写到 iframe,但它却出现在了 document 中!这是因为解析器维护了一个敞开元素栈(stack of open elements),新创建元素会被压入栈中。...尤其是脚本依然会被下载,并在文档上下文中执行 —— 只是 Firefox 中完全不会执行,~~但我认为这是个 bug~~更新:其实脚本根本不应该执行(感谢 Simon Pieters 指出这一点...下面是 3G 网络下测试结果: 点击这里查看原始测试数据。 使用 iframe 进行流式渲染,页面加载速度提高了 1.5 s。

2.8K10

HTML 中包含资源新思路

然后我想,假设浏览器允许我文档中检索 iframe 内容,也许一个旧 iframe 可能是一个很不错模式。事实证明,它肯定会!...与服务器端嵌入不同,此模式允许我们包含外部文件,同时允许自然缓存文件以供日后重用。(使用服务器端包含内容,客户端缓存是可能,但难以做到)。...无论 JavaScript 是否运行,它都会显示内容,因为这就是 iframe 设计目标。JavaScript 可以将 iframe 内容移动到文档中,即便失败了,你仍会看到包含内容。...它没有留下任何痕迹:iframe 将内容导入页面后会被删除。注意:你可能希望为 iframe 指定 border:0; 甚至可以加载安全地隐藏它(或许通过 onerror 事件再次显示它?)。...使用 iframe 进行此模式另一个好处是, iframe 会在进入视口获得延迟加载能力。这可以用 load ="lazy" 属性来实现,该属性也适用于 img 元素。

3.1K30

无界微前端是如何渲染子应用

尽管使用过程中,我们也遇到了一些问题,但这些问题往往源于我们对框架实现不熟悉。我们深入研究了无界技术源码,并将在本文中与大家分享。本文将重点探讨无界微前端如何渲染子应用。...但是 fetch 相对于原来 HTML script 标签,有一个坏处,就是 ajax 不能跨域,因此使用无界时候必须要给请求资源设置允许跨域 处理 CSS 并重新嵌入 HTML 单独将 CSS...当我们 iframe 中,使用 document.querySelector查找 #app DOM ,它只能在 iframe 中查找(副作用留在 iframe 中),但 UI 是渲染到 webComponent...下面是部分修正伪代码: // 重写 Node 原型 appendChild新增 DOM 修正 iframeWindow.Node.prototype.appendChild = function...(style) } iframe使用 document.head,需要用 Object.defineProperty 挟持 document head 属性,将其重定向到 shadowRoot

1.2K30

【前端安全】JavaScript防http劫持与XSS

两个属性分别可以又简写为 self 与 top,所以当发现我们页面被嵌套在 iframe ,可以重定向页面: if (self !...= top) { // 我们正常页面 var url = location.href; // 页面重定向 top.location = url; } 使用白名单放行正常 iframe...上面也说了,使用 top.location.href 是没办法拿到页面的 URL ,这时候,需要使用document.referrer。...就是脚本执行前发现这个可疑脚本,并且销毁它使之不能执行内部代码。 所以我们需要用到一些高级 API ,能够页面加载对生成节点进行检测。...可惜是,实际实践过程中,使用 MutationObserver 结果和 DOMNodeInserted 一样,可以监听拦截到动态脚本生成,但是无法脚本执行之前,使用 removeChild 将其移除

3.3K40

JS异步加载三种方式

()); }); } } Script In Irame:窗口插入一个iframe元素,然后再iframe中执行加载JS操作。...var insertJS = function(){alert(2)}; var iframe = document.createElement("iframe"); document.body.appendChild...三:延迟加载 有些JS代码某些情况需要使用,并不是页面初始化时候就要用到。延迟加载就是为了解决这个问题。...解决思路:为了解决JS延迟加载问题,可以利用异步加载缓存起来,但不立即执行,需要时候执行。如何进行缓存呢?...JS延迟加载机制(LazyLoad):简单来说,就是浏览器滚动到某个位置触发相关函数,实现页面元素加载或者某些动作执行。如何实现浏览器滚动位置检测呢?

3.1K20

从场景倒推,字节我们要什么样微前端体系

在此之前,我们先聊聊非微前端,页面加载是怎么操作: 通常前端页面应用打包结果入口就是一段 标签加载 js 文件,执行后往某一个 dom 节点下挂载内容,类似如下 ...,具体来说,是渲染某些区域内容,从「加载自身 chunk」变成 「加载应用入口」,加载器从 webpack 换成「微前端容器」; 以访问 https://xxx-domiain/main-app/.../xxxx 路由,自己区域内渲染对应路由内容 回到 「独立上线」 这个事情上,首先大家已经知道了微前端框架实际上就是 「应用加载子应用入口」,再简单预设这个「入口」也就是一段 js (或 html...子应用上线升级版本,怎么不让主应用重新打包? 如何选择不同版本 上线 / 回滚 / 灰度? 如何查看现在所有子应用列表? 多个版本之间切换如何集成联调? ......代理拦截与上一个方案无异) // 简化伪代码示例 frame = document.body.appendChild(document.createElement('iframe',{ src:

1.4K30

无阻塞加载脚本

通常加载页面的时候,对于组件是并行下载,现代大部分浏览器对于Js同样也是支持并行下载,但是脚本下载、解析并执行完毕之前,不会开始下载任何其他内容。 正常引入: ?...可以看出,脚本下载完毕后一段时间内(该时间解析执行脚本),不会对其他组件进行下载,以下几种方案解决该问题。 1. XHR Eval加载脚本: 即使用ajax引入脚本,并通过eval对其执行。...2.XHR注入: 类似于XHR Eval,XHR注入也是通过ajax来获取脚本,不同是该方法为创建一个scriptDOM元素,并将脚本内容插入。 ?...3.Iframe引入: 该方法为将js改成html文件,并把外部脚本写进为内行脚本,同时需要对iframe文档进行关联,同样受同源策略影响。... 缺点:iframe消耗性能大,维护性低,不推荐使用

41820

前端硬核面试专题之 HTML 24 问

确保用户不同地区能用最快速度打开网站,其中某个域名崩溃用户也能通过其他域名访问网站。 ---- window 常用属性与方法有哪些 ?...避免使用 table 进行布局:table 每个元素大小以及内容改动,都会导致整个 table 进行重新计算,造成大幅度 repaint 或者 reflow。...之后当网络处于离线状态下,浏览器会通过被离线存储数据进行页面展示。...如何使用 1、页面头部像下面一样加入一个 manifest 属性; 2、 cache.manifest 文件编写离线存储资源; CACHE MANIFEST #v0.11 CACHE: js/app.js...内联框架 iframe一般用来包含别的页面,例如 我们可以我们自己网站页面加载别人网站内容,为了更好效果,可能需要使 iframe 透明效果; iframe 会阻塞主页面的 onload 事件;

1.1K20

前端常见问题和技术解决方案

-- 窗口:http://www.domain.com/a.html --></iframe...三个页面,不同域之间利用 iframe location.hash 传值,相同域之间直接 js 访问来通信。...4)window.name + iframe 跨域window.name 属性独特之处:name 值不同页面(甚至不同域名)加载后依旧存在,并且可以支持非常长 name 值(2MB)。...鼠标移入,移出事件注意:1)如果你想要通过点击事件来改变图片移动,就必须让鼠标移动到上面设置清除计时器;因为如果不设置的话,当你通过点击事件改变它,它自身也会自己改变,会出现混乱。...实现思路:加载 loading 图片判断哪些图片要加载【重点】当图片距离顶部距离 top-height 等于可视区域 h 和滚动区域高度 s 之和说明图片马上就要进入可视区了隐形加载图片创建一个临时图片

1.9K11

JS 跨域问题常见五种解决方式

好那就进行解决吧   第一: 使用 跨域资源共享(CORS) CORS(Cross-Origin Resource Sharing)跨域资源共享,定义了必须在访问跨域资源,浏览器与服务器应该如何沟通。...第三: document.domain + iframeiframe使用主要是为了ajax通信) 不同框架之间是可以获取window对象,但却无法获取相应属性和方法。...iframe框架是不同,所以我们是无法通过页面中书写js代码来获取iframe东西: function test(){...但要注意是,document.domain设置是有限制,我们只能把document.domain设置成自身或更高一域,且主域必须相同。...第五:使用 window.postMessage方法 这个东西是HTML5引入,可以不同window下传递数据,不受域影响。

1.5K00

属性 元素内容 创建,插入和删除节点 虚拟节点

因为它不会重新解析正在使用元素,因此它不会破坏元素内现有元素。将会避免额外序列化步骤,比直接innerHTML将会快很多。...= document.createElement("script") 将其插入id为myimage元素后边 myimage.appendChild(newnode) 插入节点 一旦有了一个新节点可以使用...n.parentNode.removeChild(n) 将会删除n节点子节点n节点 replaceChild()方法删除一个子节点并用一个新节点取而代之,节点上调用该方法。...好啦,页面成功更新,使用虚拟节点拼接完成一个比较完成树,将其拼接到body子节点中,彻底完成节点操作 DocumentFragment DocumentFragment 为一种特殊Node,其作为其他节点一个临时容器...) f.appendChild(n.lastChild); // 添加子节点 // 最后,把f所有子节点一次性全部回n中 n.appendChild(f); }; insertAdjacentHTML

2.3K30

js跨域解决方案

一、问题描述 页面渲染需要动态获取iframe子页面的高度,然后重新设置iframe高度,达到自适应目的,但是由于iframe子页面中也涉及到访问其他系统页面,这就使得页面渲染无法获取子页面高度...http://script.a.com/b.js 主域相同,子域不同 不允许 http://www.a.com/a.js http://a.com/b.js 同一域名,不同域名(同上) 不允许...http)和同一端口(例如都是80),这样两个页面中同时添加document.domain,就可以实现页面调用子页面的函数。...这样会导致很多动态创建iframe插件无法使用,比如说富文本编辑插件。...我们使用代理,可以访问一些我们所不能直接访问到网络,或者可以隐藏自己真实身份。而反向代理,可以不暴露内部服务器情况下,让外部用户访问我们内部、防火墙后服务。

4K10

那些年前端跨过

同源策略最初只是用来防止不同脚本访问 Cookie ,但是随着互联网发展,同源策略越来越严格,目前不同场景下,Cookie、本地存储(LocalStorage,SessionStorage...不同标签发送请求机制不同,需要区别对待。如:标签在更改src属性就会发起请求,而其他标签需要添加到 DOM 树之后才会发起请求。...window.name 属性神奇地方在于 name 值不同页面(甚至不同域)加载后依旧存在,且没有修改情况下不会变化。...iframe 标签是一个强大标签,允许页面内部加载别的页面,如果没有同源策略那我们网站在 iframe 标签面前基本没有安全可言。...其次浏览器支持不佳,当主域相同时推荐使用document.domain方式,主域不同推荐location.hash方式。 (3)客户端与服务端通信 非双工通信场景建议使用轻量级 SSE 方式。

2K60

八种方式实现跨域请求

同源策略限制了从同一个源加载文档或脚本如何与来自另一个源资源进行交互。这是一个用于隔离潜在恶意文件重要安全机制。 那么,何为同源呢?...浏览器同源策略,出于防范跨站脚本攻击,禁止客户端脚本(如 JavaScript)对不同服务进行跨站调用(通常指使用 XMLHttpRequest 请求)。...现代浏览器使用CORSAPI容器如XMLHttpRequest来减少HTTP请求风险来源。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他 HTTP 要求。...window.name通过iframe(一般动态创建i)中加载跨域HTML文件来起作用。...而且所用协议,端口都要一致,否则无法利用 document.domain 进行跨域,所以只能跨子域 根域范围内,允许把 domain 属性值设置为它上一域。

1.6K41

AJAX 与跨域通信(二):跨域解决方案

顶级域名:诸如 .com、.cn、.net、.org 等都是顶级域名,也叫一域名 二域名:诸如 baidu.com、zhihu.com、mdn.org 等 域名、子域名:这是相对概念,诸如 .com...,但是呢,我们注意到这两个域主域是相同,只是子域不同而已,所以我们可以用 document.domain 方法实现跨域,具体来说,就是重新设置两个页面的 document.domain 为一个相同值...例如:a.b.test.com 中某个文档 document.domain 可以设成a.b.test.com(自身)、b.test.com(上一域) 、test.com(上上一域)中任意一个...假定请求数据页面是 a.html,存放数据页面是 c.html,那么我们 a.html 中通过 iframe 加载 c.html,这时候数据已经存放在 iframe 这个窗口 window.name...= 'none'; document.body.appendChild(iframe); //监听 iframe 两次加载 iframe.onload = function () { if

1.3K10

浏览器常见面试题速查

重排 部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算 表现为重新生成布局,重新排列元素 重绘 由于节点几何属性发生改变或者由于样式发生改变,例如改变元素背景色,屏幕上部分内容需要更新...优点:真正意义上实时双向通信,性能好,延迟低 缺点:独立于 HTTP 协议,需要额外项目改造,使用复杂度高,必须引入成熟库,无法兼容低版本浏览器 # 什么是浏览器同源策略 同源策略限制了从同一个源加载文档或脚本如何与来自另一个源资源进行交互...当一个资源从与该资源本身所在服务器不同域、协议或端口请求一个资源,资源会发起一个跨域 HTTP 请求。...,连接建立好了之后 client 与 server 之间双向通信就与 HTTP 无关了,因此可以跨域 window.name + iframe: window.name 属性值不同页面(甚至不同域名...三个页面,不同域之间利用 iframe location.hash 传值,相同域之间直接 js 访问来通信 document.domain + iframe: 该方法只能用于二域名相同情况下,

42930

2018年前端面试总结

选择标签请遵循以下原则: 1.尽可能少使用无语义标签div和span; 2.语义不明显,既可以使用div或者p,尽量用p, 因为p默认情况下有上下间距,对兼容特殊终端有利; 3.不要使用纯样式标签...清除浮动(添加空div法)浮动元素下方添加空div,并给该元素写css样式:{clear:both;height:0;overflow:hidden;} 给浮动元素设置高度; 同时浮动(需要给同级元素添加浮动...301 (永久移动) 请求网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD请求响应),会自动将请求者转到新位置。...属性查找 getElementById() //通过元素id查找 2.如何理解闭包 定义和用法: 一个函数里面包含了一个子函数,子函数调用了函数内部变量,如果子函数在外部被调用,就产生了闭包。...混杂模式就是兼容性模式,当页面兼容不好时候,就可以选用这种模式,防止页面布局错落无法站点工作。 14.行内元素有哪些,块元素有哪些,空(void)元素有那些?行内元素和块元素有什么区别?

71020
领券