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

Featherlight.js -如何在已经打开的轻量级iframe上更新属性

Featherlight.js是一个轻量级的JavaScript库,用于创建响应式的模态框和弹出窗口。它可以方便地在已经打开的轻量级iframe上更新属性。

要在已经打开的轻量级iframe上更新属性,可以按照以下步骤进行操作:

  1. 获取对iframe的引用:首先,需要获取对已经打开的iframe的引用。可以使用JavaScript的document.getElementById()document.querySelector()方法来获取iframe元素的引用。例如,如果iframe的id为"myIframe",可以使用以下代码获取对该iframe的引用:
代码语言:txt
复制
var iframe = document.getElementById("myIframe");
  1. 更新iframe的属性:一旦获取到iframe的引用,就可以通过修改其属性来更新它。可以使用iframe的setAttribute()方法来更新属性。例如,如果要更新iframe的src属性,可以使用以下代码:
代码语言:txt
复制
iframe.setAttribute("src", "新的URL");
  1. 刷新iframe内容:如果更新的属性需要重新加载iframe的内容,可以使用iframe的contentWindow.location.reload()方法来刷新iframe。例如,如果更新了src属性,可以使用以下代码刷新iframe:
代码语言:txt
复制
iframe.contentWindow.location.reload();

通过以上步骤,就可以在已经打开的轻量级iframe上更新属性了。

关于Featherlight.js的更多信息和使用示例,可以参考腾讯云的相关产品介绍页面:Featherlight.js - 腾讯云产品介绍

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

相关·内容

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

目前已经出现了一些成熟 Comet 应用以及各种开源框架;一些 Web 服务器 Jetty 也在为支持大量并发长连接进行了很多改进。...基于 Iframe 及 htmlfile 流(streaming)方式 iframe 是很早就存在一种 HTML 标记, 通过在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧 SRC 属性设为对一个长连接请求...同样思路用在 iframe 方案客户端,iframe 服务器端并不返回直接显示在页面的数据,而是返回对客户端 Javascript 函数调用,“<script type="text/javascript...所以在开发长连接<em>的</em>应用时, 必须注意在使用了多个 frame <em>的</em>页面中,不要为每个 frame <em>的</em>页面都建立一个 HTTP 长连接,这样会阻塞其它<em>的</em> HTTP 请求,在设计<em>上</em>考虑让多个 frame <em>的</em><em>更新</em>共用一个长连接...在实现<em>上</em>,如果是基于 <em>iframe</em> 流方式<em>的</em>长连接,客户端页面需要使用两个 <em>iframe</em>,一个是控制帧,用于往服务器端发送控制请求,控制请求能很快收到响应,不会被堵塞;一个是显示帧,用于往服务器端发送长连接请求

2.6K30

Comet技术详解:基于HTTP长连接Web端实时通信技术前言学习交流概述“服务器推”(Comet技术)应用范围来看看更传统基于客户端套接口“服务器推”技术基于 HTTP 长连接“服务器

最近几年,因为 AJAX 技术普及,以及把 IFrame 嵌在“htmlfile“ ActiveX 组件中可以解决 IE 加载显示问题,一些受欢迎应用 meebo,gmail+gtalk 在实现中使用了这些新技术...目前已经出现了一些成熟 Comet 应用以及各种开源框架;一些 Web 服务器 Jetty 也在为支持大量并发长连接进行了很多改进。...同样思路用在 iframe 方案客户端,iframe 服务器端并不返回直接显示在页面的数据,而是返回对客户端 Javascript 函数调用,“js_func(“data from server...所以在开发长连接应用时, 必须注意在使用了多个 frame 页面中,不要为每个 frame 页面都建立一个 HTTP 长连接,这样会阻塞其它 HTTP 请求,在设计考虑让多个 frame 更新共用一个长连接...在实现,如果是基于 iframe 流方式长连接,客户端页面需要使用两个 iframe,一个是控制帧,用于往服务器端发送控制请求,控制请求能很快收到响应,不会被堵塞;一个是显示帧,用于往服务器端发送长连接请求

5.9K11
  • Comet:基于 HTTP 长连接“服务器推”技术

    目前已经出现了一些成熟 Comet 应用以及各种开源框架;一些 Web 服务器 Jetty 也在为支持大量并发长连接进行了很多改进。...基于 Iframe 及 htmlfile 流(streaming)方式 iframe 是很早就存在一种 HTML 标记, 通过在 HTML 页面里嵌入一个隐蔵帧,然后将这个隐蔵帧 SRC 属性设为对一个长连接请求...同样思路用在 iframe 方案客户端,iframe 服务器端并不返回直接显示在页面的数据,而是返回对客户端 Javascript 函数调用,“<script type="text/javascript...所以在开发长连接<em>的</em>应用时, 必须注意在使用了多个 frame <em>的</em>页面中,不要为每个 frame <em>的</em>页面都建立一个 HTTP 长连接,这样会阻塞其它<em>的</em> HTTP 请求,在设计<em>上</em>考虑让多个 frame <em>的</em><em>更新</em>共用一个长连接...在实现<em>上</em>,如果是基于 <em>iframe</em> 流方式<em>的</em>长连接,客户端页面需要使用两个 <em>iframe</em>,一个是控制帧,用于往服务器端发送控制请求,控制请求能很快收到响应,不会被堵塞;一个是显示帧,用于往服务器端发送长连接请求

    2.1K70

    将多说作为静态页面的数据库

    但实现一个数据存放统计功能,单纯获取信息是不行,我们还需要一个数据库来存放数据,然后读取分析。 那么问题来了,如何在静态页面上来保存信息、存储数据?...打开多说首页,点击“我要安装”,会跳转到创建站点界面,填写完成即可创建站点。 之后我们需要创建一篇文章,因为评论是要挂钩到对应文章上面的。...此外,还可以调用显示最近访问某文章用户(例如这篇文章下面),为博客增强了社交属性。当然 Airpub 最大局限就是 SEO 了,同时也不太符合普通博客操作习惯,难以大面积推广应用。...这种场景要有用户已经登录前提,如果不需要用户登录就可以进行评论发表,还是需要 Secret ID ,如果不想暴露,也可以用后端做一个数据转发。...使用多说做论坛 多说都能做博客了,轻量级论坛当然也是 OK ,不过这里需要后端支持。例如 Denis 随手作一个轻量级论坛 http://bbs.wpjam.com/。

    52030

    BI仪表板数据可视化大屏

    :实现数据实时更新,与真实业务数据关联,将业务数据使用可视化图表进行实时展现,而非静态数据; 第三层:实现数据自助式分析,包含了数据建模、数据加工处理、可视化展示及自助式数据分析操作,是真正意义商业智能数据分析...; image.png (3)用户Token,请确保使用Token 具有足够权限(查看仪表板,集成设计器则需创建仪表板权限)。...iframe元素src属性值。...字串 将该URL字串设置为业务系统页面文件中某个iframesrc属性或者超链接href属性。...在浏览器中打开 http://localhost:51980/graphiql 网页(注意URL末尾graph与ql之间有一个字母i),可随时调试API,如下图: image.png 接下来我们再来演示如何在

    8.2K10

    当.Net撞上BI可视化,这3种“套路”你必须知道

    :实现数据实时更新,与真实业务数据关联,将业务数据使用可视化图表进行实时展现,而非静态数据; 第三层:实现数据自助式分析,包含了数据建模、数据加工处理、可视化展示及自助式数据分析操作,是真正意义商业智能数据分析...请确保使用Token 具有足够权限(查看仪表板,集成设计器则需创建仪表板权限)。...iframe元素src属性值。...字串 将该URL字串设置为业务系统页面文件中某个iframesrc属性或者超链接href属性。...在浏览器中打开 http://localhost:51980/graphiql 网页(注意URL末尾graph与ql之间有一个字母i),可随时调试API,如下图: 接下来我们再来演示如何在ASP.NET

    3.1K20

    开发一个在线 Web 代码编辑器,如何?今天来教你!

    Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。将 iframe 与 React 一起使用不需要很多更改,主要是将属性名称转换为驼峰式。...在 iframe 中,我们传递了一些我们需要属性: srcDoc: srcDoc 属性是用驼峰写,因为这是在 React 中编写 iframe 属性方法。...如果我们在没有它情况下编写它,那么每次在编辑器中按下一个键,我们 iframe 都会更新,这通常不利于性能。...也就是说,每次用户按下一个键时,它都会重新开始计数,因此 iframe 只会在用户空闲(未键入)250 毫秒时更新。这是避免每次按下键时都必须更新 iframe 一种很酷方法。...性能与可访问性 看看我们代码编辑器,有些东西肯定是可以改进。为了获得更好可访问性,你可以采取以下措施来改进: 你可以在当前打开编辑器按钮设置一个 active 类,高亮显示该按钮。

    11.9K30

    使用 Service worker 实现加速离线访问博客

    有一个困扰 web 用户多年难题——丢失网络连接。即使是世界最好 web app,如果下载不了它,也是非常糟糕体验。如今虽然已经有很多种技术去尝试着解决这一问题。...2、如果我们将网站所需资源缓存下来了以后,这个时候即使计算机没有网络,依然可以打开这个网站,即离线访问。...示例 你现在可以断开你网络,或者用浏览器中模拟无网络情景,继续访问本站。 如何在浏览器中模拟无网络环境?...在那时,你需要按照一下步骤来更新: 1、更新你 service worker JavaScript 文件。 2、更新 service worker 启动并触发 install 事件。...从未访问过网站 B,但网站已经在你设备预加载过了,一切仅仅因为你访问过网站 A。

    90820

    【实战】快来和我一起开发一个在线 Web 代码编辑器

    Iframes 如何在 React 中工作 iframe 通常与纯 HTML 一起使用。 将 iframe 与 React 一起使用不需要很多更改,主要是将属性名称转换为驼峰式。...在 iframe 中,我们传递了一些我们需要属性: srcDoc: srcDoc 属性是用驼峰写,因为这是在 React 中编写 iframe 属性方法。...如果我们在没有它情况下编写它,那么每次在编辑器中按下一个键,我们 iframe 都会更新,这通常不利于性能。...也就是说,每次用户按下一个键时,它都会重新开始计数,因此 iframe 只会在用户空闲(未键入)250 毫秒时更新。 这是避免每次按下键时都必须更新 iframe 一种很酷方法。...性能与可访问性 看看我们代码编辑器,有些东西肯定是可以改进。为了获得更好可访问性,你可以采取以下措施来改进: 你可以在当前打开编辑器按钮设置一个 active 类,高亮显示该按钮。

    69320

    JSBridge小科普

    常用三方库Dsbridge系列(https://github.com/wendux/DSBridge-Android)。那么,你知道JSBridge到底是如何在两端进行通信吗?...于是,Native WebView控件中H5页面,可以通过JS代码请求这个通用Schema协议。 比如,通过添加一个不可见iframe,设置其src属性,发送一个URI请求。...一旦系统捕获到注册表中Schema URI,就会通过此URI地址执行该Schema协议定义Native操作,执行一段Native代码或者打开APP某个页面(打开摄像头,唤起图片预览功能,跳转APP...,在 Webview 添加 onJsConfirm或onJsPrompt 监听(其实,监听window.console或者window.alert也是可以,但是这两个方法在JS coding中比较常用...Native调用Web函数 反之,如果Native需要主动调用JS方法,又该怎么做呢? 很简单,只要 H5 将 JS 方法暴露在 Window 给 Native 调用即可。

    2.8K30

    html网页详细代码「建议收藏」

    ">   其中属性值有以下一些:   属性值为"all": 文件将被检索,且页链接可被查询;   属性值为"none": 文件不被检索,而且不查询页链接;   属性值为"index": 文件将被检索...;   属性值为"follow": 查询页链接;   属性值为"noindex": 文件不检索,但可被查询链接;   属性值为"nofollow": 文件不被检索,但可查询页链接。...经常我看到很多网页中又有一个网页,还以为是用了框架,其实不然,是用了,它只适用于IE,NS可是不支持,但围着字句只有在浏览器不支援 iframe 标记时才会显示,<...第二种:可能是放图片文件夹或图片名为中文,也显示不到网页中去。 46,如何在本地机器测试flash影片loading?...第二种:可能是放图片文件夹或图片名为中文,也显示不到网页中去。 46,如何在本地机器测试flash影片loading?

    7.4K41

    前端面试题1(HTML篇)

    HTML ---- 语义化 HTML标签语义化是指:通过使用包含语义标签(h1-h6)恰当地表示文档结构 css命名语义化是指:为html标签添加有意义class 为什么需要语义化: 去掉样式后页面呈现清晰结构...在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器缓存文件 原理:HTML5离线存储是基于一个新建.appcache文件缓存机制(不是存储技术),通过这个文件解析清单离线存储资源...如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线资源加载页面,然后浏览器会对比新manifest文件与旧manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了...如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题 优点: 用来加载速度较慢内容(广告) 可以使脚本可以并行下载 可以实现跨子域通信...通过 visibilityState 值检测页面当前是否可见,以及打开网页时间等; 在页面被切换到其他后台进程时候,自动暂停音乐或视频播放 如何在页面上实现一个圆形可点击区域?

    1.8K10

    layui 如何去dom_layui 弹出层

    由于我们layer内置了轻量级加载器,所以你根本不需要单独引入css等文件。但是加载总是需要过程。当你在页面一打开就要执行弹层时,layer.ready()会是一个不错帮手。...但是如果你已经通过layer.config配置了path,你在使用layer.ready时,是不需要path: //页面一打开就执行弹层 layer.ready(function(){ layer.msg...这是因为,它真的已经大众得不能再大众了,你真正需要了解,是它内部器官,即上面一大篇幅介绍各种基础参数。...关于它似乎没有太多介绍必要,唯一让你疑惑,可能就是这个index了吧事实它非常容易得到。...(‘tips’); //关闭所有的tips层 cssStyle允许你传入任意css属性 //重新给指定层设定width、top等 layer.style(index, { width: ‘1000px

    77810

    记录工作中遇到各种问题(Bug,总结,记录)

    "> Controller似乎会触发两次,可以看到加载请求多触发了一次,且第二次链接中会多了一个#号 解决办法就是直接不设置这个属性 <iframe class="export-iframe...第一次成功打印出来,即触发了load事件,但点击下一页后,iframe实际已经刷新了,但并不会再触发这个load事件 后来解决办法是换了种监听方法,区别主要是获取iframe对象方式变了,还不知为啥会这样...有时已经开启了Gzip压缩,但从timeline看似乎是全量下载了,且看 ?...在Chrome开发者工具中打开开发者工具(Inspect in DevTools) 其实Chrome开发者工具就像是一个iframe,嵌入到页面中,也是可以审查 首先打开DevTools至独立窗口中,...然后在该独立窗口DevTools中使用快捷键(Ctrl+Shift+J)打开即可 ?

    18K12

    微前端学习笔记(3):前端沙箱之JavaScriptsandbox(沙盒沙箱)

    使用浏览器内置沙盒机制:iframe:创建一个iframe元素,并给它设置一个沙盒属性sandbox="allow-scripts")。...如果没有设置该属性,相应功能将静默失效。allow-popups-to-escape-sandbox:  允许沙箱文档打开新窗口,并且不强制要求新窗口设置沙箱标记。...沙箱逃逸几种方式:访问沙箱执行上下文中某个对象内部属性时,:通过window.parent利用沙箱执行上下文中对象某个内部属性,Proxy 只可以拦截对象一级属性,例如下面的上下文对象通过访问原型链实现逃逸...任何在沙盒内声明或者修改变量都不会影响到全局作用域,同时,全局作用域下变量在沙盒内也是不可见)// 创建一个沙盒对象,这个对象里面的属性和全局作用域不同步,避免沙盒内代码影响外部环境const sandboxProxy...,并在应用卸载时对 window 对象修改做 diff 用于子应用环境更新保存。

    36010

    基于iframe跨域与更新父窗体地址栏解决方案

    在此基础,可以在iframe中设置一些参数,使其更符合页面的需求: 可参考iframe常用属性: 1.frameborder:是否显示边框,1(yes),0(no) 2.height:框架作为一个普通元素高度...,是可以达到更新父窗体地址栏src效果,但会在修改地址栏同时刷新页面。...实际iframe内部页面点击链接后会发生跳转动作,如果这时又再次刷新页面,让用户本来已经看到页面跳转后,再看到重新刷新页面,从用户体验考虑并不好。...以此可以保证了再刷新页面后,可保持在上次打开页面,这样便于分享链接、使用回退、前进按钮。...3 相关知识点 3.1 window.location属性 window.location对象其他属性包括: · hash 哈希值。

    14.3K1350

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

    按照互联网守则: 网站加载速度越慢,用户流失越多 所以要考虑下如何在有很多第三方JS情况下,保证他们不影响到网站自己加载速度。我们可以异步加载这些第三方JS代码。...第三方JS文件一般是不同域名且JS内容不可控,所以此方法就不适用了 iframe中加载JS – 将你JS文件直接放到另一个页面的HTML中,然后将此页面URL地址作为iframe标签src属性。...但此方法需要强缓存配合,第三方JS为了在版本发布时更早更新JS代码一般都不会设置缓存,甚至有些第三方JS代码是服务器端动态生成。所以也不是适用于第三方JS。...已经有了一些基于这个想法开源实现,例如:lightning.js是一个专用于快速、安全、异步地加载第三方JS代码库。 这个方法也不完美,它需要创建一个iframe标签导致了开销较大。...虽然标准已经比较旧了,但是里面提到了通过设置变量inDapIF为true来通知第三方JS:你现在正运行在iframe中。

    4.2K90

    微信小程序开发越早知道越好注意点

    公众号菜单、公众号图文素材可以打开小程序,网页无法直接打开小程序。 小程序内嵌网页、内嵌网页中跳转链接、iframe 嵌套页面,都必须在安全域名内,否则无法访问。...官方「小程序助手」小程序可以很方便打开各版本小程序。 每次发布新版本,用户都需要重新下载新版本。 小程序仍在不断更新和完善,旧代码可能会因不符合新政策,在下次发布时候无法正常运行。...如果有复杂状态管理需求的话,建议引入一些设计模式或使用第三方框架。 用户微信支付后,需要后台推送消息到服务器,才能确认支付成功。 小程序 DOM 操作只能查询属性,无法设置属性。...小程序也存在兼容性问题,对待不愿更新微信用户,要像对待忠实IE6用户一样,小程序基础库版本分布。...小程序有很多原生组件, Vedio、Map。原生组件位于最上层,会遮挡所有非原生组件,还存在诸多限制,如无法改变大小、无法添加动画效果等等。不过,有些组件在最新版本已经可以同层渲染了。

    58130

    加载第三方JS各种姿势

    按照互联网守则: 网站加载速度越慢,用户流失越多 所以要考虑下如何在有很多第三方JS情况下,保证他们不影响到网站自己加载速度。我们可以异步加载这些第三方JS代码。...第三方JS文件一般是不同域名且JS内容不可控,所以此方法就不适用了 iframe中加载JS – 将你JS文件直接放到另一个页面的HTML中,然后将此页面URL地址作为iframe标签src属性。...但此方法需要强缓存配合,第三方JS为了在版本发布时更早更新JS代码一般都不会设置缓存,甚至有些第三方JS代码是服务器端动态生成。所以也不是适用于第三方JS。...大家先通过fiddler代理来设置test.js加载时间为10秒,然后打开之前DEMO,查看页面的loading是否会被延长。下面是我打开第一个DEMO结果: ?...已经有了一些基于这个想法开源实现,例如:lightning.js是一个专用于快速、安全、异步地加载第三方JS代码库。 这个方法也不完美,它需要创建一个iframe标签导致了开销较大。

    6.2K10
    领券