iframe的基本介绍与使用
更新时间：2024年02月11日 09:04:06 作者：大聪明码农徐
本文将给大家详细介绍一下iframe的基本介绍与使用,iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签,它可以在一个页面中显示来自其他页面的内容,需要的朋友可以参考下
一、介绍
iframe（内嵌框架）是 HTML 中一种用于将一个网页嵌入到另一个网页中的标签，它可以在一个页面中显示来自其他页面的内容。在网页中，使用<iframe>标签可以将一个网页嵌套在另一个网页中，实现网页间的互联互通。
二、使用
<iframe>标签的基本用法如下：
<iframe src="URL"></iframe>
三、属性
| 属性 | 描述 |
|---|---|
| allow | 允许特定功能的列表，如fullscreen，geolocation等 |
| allowfullscreen | 指定是否允许在iframe中使用全屏模式 |
| allowpaymentrequest | 指定是否允许在iframe中进行支付请求 |
| allowtransparency | 指定iframe是否可以是透明的 |
| class | 为iframe定义一个或多个类名 |
| frameborder | 指定是否在iframe周围显示边框 |
| height | 指定iframe的高度 |
| importance | 指定iframe对页面内容的重要性 |
| loading | 指定iframe加载时的行为 |
| name | 为iframe定义一个名称 |
| referrerpolicy | 指定如何发送referer HTTP标头 |
| sandbox | 启用iframe的沙盒模式，提高安全性 |
| src | 指定要在iframe中显示的文档的URL |
| srcdoc | 在iframe中嵌入HTML代码而不是外部文档 |
| style | 定义iframe的CSS样式 |
| title | 为iframe定义一个标题 |
| width | 指定iframe的宽度 |
四、注意
虽然 <iframe> 标签可以很方便地实现上述功能，但是需要注意以下几点：
- 嵌入的网页必须与主页面同源，否则会受到浏览器的安全限制。
- 嵌入的网页可能会影响页面性能和加载速度，特别是当嵌入的网页包含大量的资源（如图片、CSS 和 JavaScript）时。
- 嵌入的网页可能会被恶意攻击者用于钓鱼或注入恶意代码的攻击，因此需要谨慎使用。
总之，在使用 <iframe> 标签时，需要仔细权衡其优缺点，确保安全和性能。
五、传值
5.1 URL传参
可以在iframe的src属性中使用查询参数（也称为URL参数）将数据传递到嵌入的页面。例如，假设iframe嵌入的页面URL是 index.com/page.html，那么可以使用如下的URL来传递数据：
<iframe src="index.com/page.html?param1=value1¶m2=value2"></iframe>
在嵌入的页面中，可以使用JavaScript获取查询参数并使用它们：
var params = new URLSearchParams(window.location.search);
var param1 = params.get('param1');
var param2 = params.get('param2');或者写一个函数获取对应的值（该方法来自拓维的一位前端工程师大佬）：
//从url获取参数
export const getQuery = (name: string, url?: string) => {
const params = new URLSearchParams(url || window.location.search);
const value = params.get(name);
if (value) {
return value;
}
return getQueryString(name, url);
};
export const getQueryString = (name: string, url?: string) => {
const reg = new RegExp('(^|&|/?)' + name + '=([^&]*)(&|$)', 'i');
const r = encodeURI(url || window.location.search || window.location.href || window.location.hash)
.substr(1)
.match(reg);
if (r != null) return unescape(r[2]);
return null;
};5.2 postMessage（）传参
postMessage()方法是一种用于在不同窗口或文档之间传递消息的通用方法，它可以实现跨域通信。在使用postMessage()方法时，需要在发送消息的窗口（发送方）和接收消息的窗口（接收方）中分别编写代码。
5.2.1 子传父：
子：
// 发送消息给接收方窗口
window.parent.postMessage("Hello, parent!", "http://parent.com");父：
// 监听message事件，接收消息
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
// 判断消息来源是否是指定的发送方窗口
if (event.origin === "http://child.com") {
// 处理接收到的消息
console.log(event.data);
}
}5.2.2 父传子：
父：
创建实例对象：
const iframe = document.getElementById('my-iframe');
const iframeWindow = iframe.contentWindow;发送消息：
const message = { type: 'GREETINGS', data: 'Hello, child!' };
const targetOrigin = 'http://child.com'; // 指定接收方的源
iframeWindow.postMessage(message, targetOrigin);子：
接收消息
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event) {
if (event.origin === 'http://parent.com') { // 验证消息来源
console.log(event.data); // 处理接收到的消息
}
}以上就是iframe的基本介绍与使用的详细内容，更多关于iframe介绍与使用的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍用js的confirm实现的删除条目时弹出的确认对话框，询问是否要删除这条记录,需要的朋友可以参考下2014-06-06
这个功能主要是方便我们在发布文章时填写关键字的时候，不用切换为英文状态输入逗号，他可以将中文逗号和空格统一转换为英文逗号，提高工作效率。2008-11-11![[JSF]使用DataModel处理表行事件的实例代码](//img.jbzj.com/images/xgimg/bcimg2.png)
在使用JSF中，最常用的恐怕就要属于表格的处理了。使用DataModel可以方便地进行对表行的处理：2013-08-08
文章介绍了在Web开发中使用RSA非对称加密算法保护敏感信息的方法,详细讲解了JSEncrypt库的安装、使用和注意事项,此外,还提供了生成公私钥、动态获取公钥以及安全性建议等实用内容,需要的朋友可以参考下2026-05-05
本文给大家分享的是使用纯javascript实现放大镜效果的代码，并附上封装的步骤，做电商程序的小伙伴们一定不要错过。2015-03-03
这篇文章主要介绍了JS匿名函数和匿名自执行函数概念与用法,结合实例形式分析了匿名函数和匿名自执行函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下2018-03-03
这篇文章主要为大家详细介绍了JavaScript function函数种类，知识点很全面，包括普通函数、匿名函数、闭包函数，感兴趣的小伙伴们可以参考一下2016-03-03
本文主要介绍了JavaScript 对象合并的几种方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
这篇文章主要介绍了js实现鼠标经过表格行变色的方法,涉及javascript表格节点样式及鼠标事件的相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JS使用parseInt解析数字实现求和的方法,涉及javascript表单元素值的获取及parseInt解析转换字符串为数字的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-08-08
![[JSF]使用DataModel处理表行事件的实例代码](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论