首页 > 其他分享 >关于iframe标签用法

关于iframe标签用法

时间:2024-07-04 14:27:59浏览次数:25  
标签:嵌入 网页 iframe 标签 用法 allow 页面

iframe是啥?

概念:

  iframe 是 HTML 的一个标签,用于在网页中嵌入另一个 HTML 文档。通俗来讲就是你自己的html页面里面可以随便拿一块空间嵌套别的网页。你们看到这个页面两侧的广告(google广告)。下面是我自己在自己页面嵌套的youtube视频~

  代码:

效果

 

iframe 的属性:

  • src: 指定要嵌入的外部文档的 URL。
  • widthheight: 设置 iframe 的宽度和高度。
  • frameborder: 指定是否显示 iframe 的边框(取值为 "0" 或 "1")。
  • sandbox: 提供了一组额外的安全属性来限制 iframe 中内容的行为。可以组合使用多个值,如 allow-scriptsallow-same-originallow-forms 等。
  • name: 为 iframe 指定一个名称,以便可以通过目标属性或脚本进行引用。
  • allow: 定义特定的功能权限,如 allowfullscreen 允许全屏显示。

iframe 的常见用法:

 1.嵌入外部页面

<iframe src="https://www.baidu.com" width="800" height="600"></iframe>

 2.嵌入YouTube视频

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

3.嵌入谷歌地图

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509323!2d144.96305781531677!3d-37.816279179751704!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577b0f0b1e9d0c2!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1587937071678!5m2!1sen!2sau" width="600" height="450" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

安全性

 使用"sandbox"可以增强iframe安全性,就是js沙盒

<iframe src="https://www.example.com" sandbox="allow-scripts allow-same-origin"></iframe>

allow-scripts 允许执行脚本,allow-same-origin 允许与主页面共享相同的源。根据需要,可以添加或删除这些限制。

哈哈哈,如果你们网页想用的别的网站的东西啥的,可以试试iframe标签哦!!!

标签:嵌入,网页,iframe,标签,用法,allow,页面
From: https://blog.csdn.net/weixin_42884605/article/details/140178273

相关文章

  • 60种AI工具用法 学会探索AI的无限可能
    摘要:本文综述了人工智能(AI)工具的多种应用,旨在展示AI技术在不同领域的潜力和实用性。从文本生成到数据分析,再到内容创作和编辑,AI工具正逐步改变我们的工作和学习方式。**关键词:**人工智能,工具应用,效率提升,技术综述1.引言随着人工智能技术的快速发展,AI工具已成为提高工作效......
  • Vue的常见指令及用法案例
    Vue会根据不同的标签指令,实现不同的功能。指令:指的是带有v-前缀的的特殊标签属性。我们常见的vue指令有:1.v-html:类似于js中innerHTML,用于设置元素的HTML。案例如下:<divid="app"><divv-html="msg"></div><divv-html="h"></div></di......
  • selenium04_iframe切换
    1.用iframe的id属性切换到iframe:driver.switch_to.frame("id的值")2.用iframe的name属性切换到iframe:driver.switch_to.frame("name的值")3.iframe没有id和name属性,把iframe当作一个对象,用标签去定位全部iframe,然后用下标取某个iframe,再去切换frame=driver.find_elements_by_t......
  • git cherry-pick 用法
    gitcherry-pick是一个Git命令,用于将一个或多个提交从一个分支复制并应用到当前分支。这个操作允许你有选择性地将特定提交引入到不同的分支中,而不需要合并整个分支。 以下是关于gitcherry-pick的一些关键点和使用方法:1基本用法要使用gitcherry-pick,首先需要找......
  • 不实用iframe,CSS媒体查询依旧生效
    这段SCSS代码定义了用于处理响应式设计和媒体查询的功能和混合器。以下是对这段代码的逐行解释:```scss$mediaMinWidth:1024px;```定义了一个变量`$mediaMinWidth`,其值为1024像素。```scss@functiontranslate-media-condition($c){$condMap:("screen":"......
  • 高效存储的秘诀:bitmap 数据结构在标签中的应用
    在当今大数据和信息爆炸的时代,如何有效地管理和查询海量的数据成为了企业和开发者面临的重大挑战。其中,标签系统作为数据管理中的一种重要手段,被广泛应用于用户画像、商品分类、内容推荐等多个场景。然而,随着标签数量的急剧增加,传统的数据存储和查询方式已难以满足高效率、低延迟......
  • 掌握 Python 中 isinstance 的正确用法
    ......
  • C++学习1 “&”符号的用法
    “单纯来源于CHATGPT”一在C++中,&符号具有多重用途,主要包括以下几种情况:1.地址运算符当&用于变量前面时,它作为一种一元运算符,用来获取该变量在内存中的地址。例如:inta=5;int*p=&a;//p存储a的内存地址这里&a表示变量a的地址。2.引用声明在类型声明......
  • 1367java jsp SSM留学生交流互动论坛网站系统经验分享计划分享软件推荐网址推荐标签分
     项目技术:SSM+Maven+Vue等等组成,B/S模式+Maven管理等等。环境需要1.运行环境:最好是javajdk1.8,我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境:IDEA,Eclipse,Myeclipse都可以。推荐IDEA;3.tomcat环境:Tomcat7.x,8.x,9.x版本均可4.硬件环境:windows7/8/1......
  • MyBatis的几个核心类和基本用法
    1.SqlSessionFactoryBuilder:读取配置信息创建SqlSessionFactory,建造者模式,方法级别生命周期,方法结束生命周期结束;重点是建造出SqlSessionFactory工厂对象2.SqlSessionFactory:SqlSession工厂对象,用于创建Sqlsession,工厂单例模式,存在于程序的整个生命周期;3.SqlSession:代......