iframe的基本介绍与使用

这篇具有很好参考价值的文章主要介绍了iframe的基本介绍与使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、介绍

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); // 处理接收到的消息
  }
}

注意:可以将  targetOrigin 设置为“ * ” 号以匹配所有路径,但可能会有安全风险。谨慎使用。文章来源地址https://www.toymoban.com/news/detail-428138.html

到了这里,关于iframe的基本介绍与使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Django:六、使用iframe标签内嵌页面报错;拒绝了我们的连接请求;because it set ‘X-Frame-Options‘ to ‘deny‘.

    使用标签内嵌页面时报错: 127.0.0.1 拒绝了我们的连接请求。 查看错误代码,发现: Refused to display \\\'http://127.0.0.1:8000/\\\' in a frame because it set \\\'X-Frame-Options\\\' to \\\'deny\\\'. 由于x-frame-options设置了deny属性,导致了iframe失效,x-frame-options响应头是用来给浏览器设置允许一个页面可否在fra

    2024年02月03日
    浏览(49)
  • React框架的介绍、特点、安装及基本使用流程

    react是由facebook前端开发团队开发和维护的js框架 react的实现功能类似VUE,但是由于国外的开发风格,导致在react上,并没有对数据渲染的步骤进行封装,需要开发者更多的使用es6的语法手动完成数据渲染,所以,代码难度比VUE高。 1.一切皆组件:在react中几乎都是使用组件进行

    2024年01月21日
    浏览(43)
  • Go 爬虫三种框架的基本使用介绍

    当今互联网时代,数据已经成为了一种非常宝贵的资源。而爬虫技术则是获取这些数据的一种重要手段。Go 作为一门现代化的编程语言,其在爬虫领域也有着广泛的应用。在本篇博客文章中,我们将会介绍一些常用的 Go 爬虫框架,并且会通过一个简单的示例来演示如何使用这

    2024年02月03日
    浏览(56)
  • shiro框架基本概念介绍

    Shiro 是一个强大灵活的开源安全框架,可以完全处理身份验证、授权、加密和会话管理 身份验证(Authentication):验证用户的身份,确保用户是合法的。 授权(Authorization):控制用户对系统资源的访问权限,限制用户只能访问其被授权的部分。 会话管理(Session Management):

    2024年02月13日
    浏览(36)
  • HTML5的介绍和基本框架

    目录 HTML5 HTML5介绍 HTML5的DOCTYPE声明 HTML5基本骨架 html标签 head标签 body标签 title标签 meta标签 在vscode中写出第一个小框架 HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以 .html 结尾 HTML是一种标记语言,标记语言是一套标记标签。标签是由尖

    2024年02月12日
    浏览(34)
  • JVS开源基础框架:平台基本信息介绍

    JVS是面向软件开发团队可以快速实现应用的基础开发脚手架,主要定位于企业信息化通用底座,采用微服务分布式框架,提供丰富的基础功能,集成众多业务引擎,它灵活性强,界面化配置对开发者友好,底层容器化构建,集合持续化构建。 JVS是定位为辅助研发团队的快速脚

    2024年02月12日
    浏览(54)
  • selenium iframe框架处理

    对于子嵌套的页面,我们直接标签定位会报错,如下面代码 所以我们要切换作用域,根据iframe标签的id转入iframe框架,再进行后续操作。 操作完成后返回主框架 源码语法请看下图  我们来模拟登录进行简单案例加以巩固,比如qq空间登录界面。 现在一般来说,进入qq空间官网

    2024年02月04日
    浏览(36)
  • html iframe 框架有哪些优缺点?

    🙂博主:锅盖哒 🙂文章核心: html iframe 框架有哪些优缺点? 前言: 用法: 理解: 优点: 嵌套外部内容: 独立性: 分离安全性: 跨平台兼容性: 方便维护: 缺点: 性能开销: 用户体验问题: 可访问性: 不适合移动设备: 高质量讨论: HTML iframe (内联框架)是一种

    2024年02月08日
    浏览(51)
  • 最强自动化测试框架Playwright(20)- iframe

    一个页面可以附加一个或多个 Frame 对象。每个页面都有一个主框架,并且假定页面级交互(如)在主框架中运行。 click 使用 iframe 时,可以创建一个框架定位器,该定位器将进入 iframe 并允许选择该 iframe 中的元素。 上面代码,先定位frame,然后定位frame里的元素,并对元素

    2024年02月13日
    浏览(41)
  • iframe框架一个页面中嵌套到另外一个页面

    在一个页面中嵌套另外一个页面,就要使用到框架iframe 标签。iframe 标签规定一个内联框架。一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。 基本语法 : 举例 :  运行浏览器后得到的效果如图   以上例子展示了iframe的用法,在浏览器执行后,iframe有个默认的高宽,

    2024年02月09日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包