iframe点击时再加载内容

最新推荐文章于 2025-07-21 16:50:38 发布

原创最新推荐文章于 2025-07-21 16:50:38 发布 · 572 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

该文章探讨了如何使用HTML的loading=lazy属性来优化网页性能，通过延迟加载iframe内容，提高页面的初始加载速度，同时保持良好的用户体验，特别是对于包含嵌入式媒体的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击时再加载内容

loading=“lazy”

<iframe id="xxx" src="./xxx.html" allowfullscreen="true" frameborder="0" loading="lazy"></iframe>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ShadeTrees

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

12-03

用JavaScript刷新上级页面和当前页面代码如下: [removed] //刷新上级页面 //window.parent.main.[removed].reload(); //刷新当前页面 [removed].reload(); [removed] 每个frame元素或者iframe元素就是一个框架,这个框架是一个窗口,在这个窗口中加载一个html文档.使用下面的几种方法都可以引用frame或iframe元素: 代码如下: window.frames[index] windows.frames[“框架名”]

iframe异步加载实现点击左边菜单加载右边内容实例讲解

12-12

关于iframe异步加载，我们常用的大都是左边菜单栏右边是内容页面，要求我们不能左边菜单不能刷新的情况下，异步加载右边的内容页面。话不多说，做了一个实例大致是这样的： 1、首先在你的项目中建立三个文件如： 2...

1 条评论您还未登录，请先登录后发表或查看评论

使用iframe嵌入页面时，src改变但是页面未刷新

weixin_52443895的博客

11-01

4819

可能有缓存，页面没有重新加载，没有及时刷新。给iframe加key(亲测有效）值已经变化，仅仅是页面未刷新。希望记录的问题能够帮助到你！嵌入显示, 点击修改该。的内容，即页面未刷新。

点击连接切换iframe

kingwin28的博客

02-20

532

点击连接切换iframe

vue的iframe重载

weixin_35748962的博客

01-09

1870

如果您想在 Vue 应用程序中重新加载一个嵌入在 iframe 中的网页，您可以使用下面的代码： document.getElementById("iframeId").contentWindow.location.reload(); 您需要使用 iframe 的 id 来访问它，然后调用 contentWindow 属性并使用 location.reload 方法来重新加载网页。请注意，这只...

iframe实现点击后再加载

qq_21522331的博客

08-19

1421

<body> <ul> <li> <a onclick="frameA.src='./a.html'">A</a> </li> <li> <a onclick="frameB.location='./b.html'">B</a> </li> <li> <a onclick="frameC.location='./c.html'">C&lt

iframe重新加载最简单的方法！初次渲染和更新后渲染不会引起其他页面变动

一枚不断学习的小码农一枚~

03-18

1801

我们项目有一个【加载场景】【切换场景】的需求，iframe是子组件，数据传过去之后没有重新加载，我测试发现重新渲染的时候，iframe的load方法没有重新加载，数据变动后也不会影响，然后我用了网上好几种方法，发现都有bug。我们知道改变iframe的src方法会使其重新加载，我本来还在想，如何改变这个变量，然后先试了一下，直接取出ifrmae的src属性再赋值给src，结果成功了哈哈哈哈。比如，在useeffect里接收子组件参数去请求服务端后使用reload方法，会引起页面死循环。

js重新加载iframe框架

AVATAR

04-19

3348

重新加载iframe框架 window.parent.frames['bottom'].location.reload()

iframe重新加载

dpn525的专栏

03-24

200

document.frames('iframesid').location.reload()

ASP.NET中iframe框架点击左边页面链接右边显示链接页面内容

10-21

右侧的iframe（Right）设置其src属性，初始页面可以是一个默认页面（如AddNews.aspx），当左侧导航被触发时，根据TreeView控件的TreeNode的NavigateUrl属性指定的地址来加载内容。在实现上述功能时，需要确保***...

JQuery判断子iframe何时加载完成解决方案

10-26

比如在本例中提到的按钮点击操作，就可以安全地放置在.load()事件处理函数内部，这样就能确保只有在iframe内容完全加载后才能执行。最后，由于本文内容是基于OCR扫描文稿，可能会存在一些识别错误或遗漏的问题。...

JS加载iFrame出现空白问题的解决办法

10-22

本文分享了针对在IE6环境下，通过JavaScript来加载iframe时遇到的空白问题的解决方案。通过合理的代码处理，可以确保即使在兼容性较差的浏览器环境下也能顺利加载页面，进而提高用户体验。首先，本文介绍了遇到的...

iframe 重新加载

曹先森的博客

03-04

8996

方法1： document.getElementById('iframeId').contentWindow.location.reload(true); 方法2： document.getElementById('iframeId').src=url; 方法3： $("#iframeId").attr('src', url); 在使用的时候需先加载iframe 而后才能使用方法一（一个不...

js实现iframe内容加载失败自动重新加载功能

扣丁曼

01-17

1555

iframe页面加载失败自动重新加载解决方案

强制iframe重新加载

CSS 初学者指南

06-24

1004

您可以触摸它的src ： $('iframe').attr('src', $('iframe').attr('src')); 翻译自: https://css-tricks.com/snippets/jquery/force-iframe-to-reload/

关于使用iframe导致页面重复加载的问题

nininna的博客

08-15

2954

记录一个坑，页面使用iframe想要动态加载内容，代码如下，但是“test"总会输出两次，后来找到了原因，是iframe的src导致页面重复加载所以js加载了两次；将src属性删掉，js里直接动态绑定，这样就不会在加载页面时重复执行js，

iframe点击后再加载