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&param2=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实现拖动缓动效果
这篇文章主要为大家详细介绍了js实现拖动缓动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-01-01
多种方法判断Javascript对象是否存在
我们要判断一个全局对象myObj是否存在，如果不存在，就对它进行声明，Juriy Zaytsev指出判断一个Javascript对象是否存在，有超过50种写法，下面为大家介绍几种比较常用的，感兴趣的朋友可以参考下
2013-09-09
JS中常见的8种继承方法总结
这篇文章主要给大家介绍了关于JS中常见的8种继承方法,在js中所有的引用类型都继承了Object,而继承也是通过原型链实现的,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-10-10
JSF中confirm弹出框的用法示例介绍
本文为大家详细介绍下JSF中confirm弹出框的使用方法，感兴趣的朋友可以参考下
2014-01-01
JS去掉第一个字符和最后一个字符的实现代码
本篇文章主要是对JS去掉第一个字符和最后一个字符的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
JavaScript进阶（四）原型与原型链用法实例分析
这篇文章主要介绍了JavaScript原型与原型链,结合实例形式分析了JavaScript原型与原型链基本概念、原理、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
BootStrap modal实现拖拽功能
这篇文章主要为大家详细介绍了BootStrap modal实现拖拽功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
Javascript加载速度慢的解决方案
在网站里面会加载一些js代码,统计啊,百度广告等等，结果弄得页面加载速度很慢，下面有个不错的解决方法，大家可以参考下
2014-03-03
微信小程序项目实践之主页tab选项实现
这篇文章主要介绍了微信小程序项目实践之主页tab选项实现,本文通过实例代码相结合的形式给大家介绍的非常详细，需要的朋友可以参考下
2018-07-07
JS设计模式之观察者模式实现实时改变页面中金额数的方法
这篇文章主要介绍了JS设计模式之观察者模式实现实时改变页面中金额数的方法,结合实例形式对比分析了javascript基于观察者模式实时改变页面金额数的相关操作技巧,需要的朋友可以参考下
2018-02-02