html总结 iframe 的神奇用法 无刷新加载其他页面的内容

最新推荐文章于 2023-08-03 18:05:40 发布
最新推荐文章于 2023-08-03 18:05:40 发布
阅读量5.5k 收藏
点赞数
分类专栏： html 文章标签： iframe
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuxuechao6/article/details/52801160
版权 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    <META http-equiv="Content-Type" content="text/html; charset=gb2312">

</head>
<body>
<p>
    <a href="http://www.runoob.com" target="iframe_a">RUNOOB.COM</a>
    &nbsp;  &lt;a
    <a href="http://www.baidu.com" target="iframe_a">BAIDU.COM</a>

</p>

<br>
<iframe  width="100%"  height="500" frameborder="0" name="iframe_a" ></iframe>
</body>
</html>
遗失的小许
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML iframe 用法总结收藏
09-28
iframe是框架的一种形式，也比较常用到。
前端性能优化
weixin_43526403的博客
04-03 2474
另外如果设置了满屏背景图，但屏幕可视区域内有占比较大的元素（浮在背景图上的元素），导致背景图暴漏可视范围较小，那么最大内容会选择可视区域内最大元素。当页面加载完后，我们需要获取所有需要懒加载的图片的元素集合，判断是否在可视区域，如果是在可视区域的话，再重新设置元素的src属性值为真正图片的地址。元素大小是指用户在可视区域内可见的大小，如果元素有延伸到可视区域外，或者元素被裁剪或包含不可见的溢出，这些部分不计入元素大小。（2）最初在可视范围内渲染，然后被移除可视区域外的元素仍将报告他在可视区域内的初始大小。
iframe 标签(用于嵌套网页)及loading加载动画效果
m0_58293192的博客
12-16 8227
iframe 标签(用于嵌套网页)及loading加载动画效果
如何使用iframe加载loading效果让你的网站更加专业
Shids_的博客
03-08 7188
如何使用iframe加载loading效果让你的网站更加专业
iFrame嵌套传参
weixin_44191250的博客
08-06 998
1.考虑到我的Vue父项目加载iframe需要时间，我在子项目中加了300毫秒的延迟。先在Vue子项目的 mounted里面建立一个与Vue父项目的链接。同样也是在mounted里面监听一下子项目传递的消息。情况说明：两个Vue项目嵌套（vue父，Vue子）2.像Vue父发送一个信息，告诉他已经连接成功。第一步：嵌套完成，开始通信。......
网站优化Preload进行预加载的使用方法
huxyc的博客
12-05 1263
元素的 rel 属性的属性值preload能够让HTML页面中 元素内部书写一些声明式的资源获取请求，使得资源可以更早的得到加载。 在这里，我
html中iframe控制父页面刷新实现思路及代码
09-28
正如标题所言具体的实现思路为在b页面中找到a页面，然后找到a页面里的iframe，重新对iframe的src属性进行赋值，下面以实例的方式为大家介绍下，感兴趣的朋友可以参考下哈
PHP+iFrame实现页面无需刷新的异步文件上传
10-25
主要介绍了PHP+iFrame实现页面无需刷新的异步文件上传,包含了iframe框架与form表单的运用及PHP文件上传等技巧,需要的朋友可以参考下
网页内容优化（减少HTTP请求、减少DNS查询、避免页面多次跳转、缓存AJAX、延迟和提前加载、根据域名划分内容减少iframe数量、避免404）
AIWWY的博客
09-21 993
目录 减少HTTP请求 合并文件 雪碧/精灵图 内嵌图片 减少DNS查询 避免页面多次跳转（重定向） 缓存AJAX 延迟加载（懒加载） 提前加载（首屏加载） 无条件提前加载 有条件加载 有预期的的加载 根据域名划分内容 减少iframe数量 避免404 减少HTTP请求 合并文件 很多现成的库可以帮你将多个脚本文件合并成一个文件，将多个样式表文件捆合并一个文件，以此来减少文件的下载次数。 雪碧/精灵图 合并图片，并通过坐标决定显示哪张图片。 内嵌图片 通过编码的.
使用iframe嵌套，进行数据传递到方式总结
weixin_42863883的博客
01-19 5360
ifame数据传递 总结了3中，跨域传递、同域传递、同源传递 跨域传递能通过document.getElementById(‘frameObj’).contentWindow访问部分数据，但都是只读，不能够修改 同域传递、同源传递可以通过 document.getElementById(‘frameObj’).contentDocument、 document.getElementById(‘frameObj’).contentWindow，访问到iframe内部，等同与内部的document和windo
用IFRAME实现网页的内嵌和预载
jspengxue
01-25 431
在HTM(HTML)文件中是否可以像PHP、ASP文件一样嵌入其他文件呢？下面笔者介绍用iframe来实现的方法。 　　iframe元素的功能是在一个文档里内嵌一个文档，创建一个浮动的帧。其部分属性简介如下： 　　name：内嵌帧名称 　　width：内嵌帧宽度(可用像素值或百分比) 　　height：内嵌帧高度(可用像素值或百分比) 　　frameborder：...
Iframe之间传值和数据的方法
weixin_33868027的博客
06-21 7767
最近碰到个问题, 要在Iframe之间传值和数据, 因为页面对像的不同, 一个ifram页面中的form值和数据直接get或Post都是传不到另一个iframe页面的, 设置taget也没有用, 在网上找了很久 没有很好的方法. 只有通过js来实现. 两个重要的javascript语句: top.result.document.location='result.html?...
iframe懒加载_懒加载的新加载方式（转）
weixin_39814454的博客
12-20 650
懒加载，一个在我们前端性能优化中高频出现的词汇，无论是懒加载图片还是懒加载模块，无非都是希望用户可以在滚动指定视区再去加载相应的资源， 从而达到节省用户流量、提升首次加载时间、减轻服务器的压力的目的。“懒加载”不是一个新的概念，对于经验丰富的你们来说，一定积累了很多实现方法，但为什本文还要提出来呢？因为我们开发过程中，常用的实现方式都是通过监听页面的 scroll 事件来实现的，这种方法在使用过程...
在HTML页面中加载另外的页面的三种简单方法
最新发布
u010782109的博客
08-03 2182
【代码】在HTML页面中加载另外的页面的三种简单方法。
HTML iframe 内嵌网页
就这样吧
07-02 3907
1. HTML <iframe src="https://cn.bing.com/" width="100%" height="500px"> </iframe> 2. 请求URL显示错误： Refused to display 'http://127.0.0.1:8000/show/' in a frame because it set 'X-Frame-Options' to 'sameorigin'. X-Frame-Options：https://developer
html嵌套html的两种方法（ iframe，load）
Twotangerine的博客
03-09 4095
获取某个div的id或者class调用load方法 里面填写要嵌套html的路径就可以了。scrolling: 是否开启滚屏。src：你要导入的html。
iframe预加载小记
weixin_30416497的博客
12-27 686
昨天博客园上看到一篇《iframe异步加载技术与性能》，感觉不错，感谢该博主的分享,对前端性能感兴趣的朋友可以研究下,这里我不准备对原文进行重复,只是做个记录, 对博文中提到的Meebo工程师的印象较深, 所以自己也做了个小例子,用firebug的net面板看了下, 顺便说一下iframe用于预加载也是一个相对不错的选择,这里有篇文章大家也可以参考《用javascript预加载图片、css、js的...
关于大量iframe加载的解决方案
热门推荐
中华胡杨的专栏
11-13 1万+
手头的一个项目，根据客户的要求，在前端自动生成大量的iframe，比如90个iframe，而且这些iframe是嵌套在一个大的iframe下的，不要问我为什么这样。方案1：将动态生成的url，附加到iframe的src中，比如后端生成了90个iframe，那么将这些数据返回到浏览器，然后让浏览器自动去请求。这个时候的现象是：浏览器直接假死，就是任何操作都已经做不了了。猜想原因是：当文档加载完成时，将
使用iframe实现点击导航无刷新切换页面
05-25
使用 iframe 实现点击导航无刷新切换页面的基本思路是：将导航链接的目标页面放入 iframe 中，点击导航链接时，只需要切换 iframe 的 src 属性即可实现无刷新切换页面。 以下是实现步骤： 1. 在 HTML 文件中添加一个 iframe 元素，设置其 id 和 name 属性为相同的值，以便在后面使用 JavaScript 操作 iframe。 2. 在导航链接中添加 target 属性，将其值设置为 iframe 的 name 属性，以便点击链接时在 iframe 中打开目标页面。 3. 使用 JavaScript 获取导航链接元素，为其添加点击事件监听器，在事件处理函数中获取链接的 href 属性值，将其赋值给 iframe 的 src 属性，即可实现无刷新切换页面。 代码示例： HTML 文件中添加 iframe 元素： ```html <iframe id="myFrame" name="myFrame"></iframe> ``` 导航链接添加 target 属性： ```html <a href="page1.html" target="myFrame">Page 1</a> <a href="page2.html" target="myFrame">Page 2</a> <a href="page3.html" target="myFrame">Page 3</a> ``` JavaScript 代码实现： ```javascript const links = document.querySelectorAll('a[target="myFrame"]'); const iframe = document.getElementById('myFrame'); links.forEach(link => { link.addEventListener('click', event => { event.preventDefault(); // 阻止默认行为 const href = event.target.getAttribute('href'); iframe.setAttribute('src', href); }); }); ``` 注：使用 iframe 实现页面无刷新切换存在一些问题，比如无法使用浏览器的前进和后退功能，也无法在 iframe 中执行一些 JavaScript 代码。因此，建议使用其他技术实现页面无刷新切换，比如 Ajax 和 History API。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值