Html代替<iframe>标签的三种方法<object>, <embed>和<video>

这篇具有很好参考价值的文章主要介绍了Html代替<iframe>标签的三种方法<object>, <embed>和<video>。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

背景

某平台对iframe标签做了些许限制但是前端代码有bug导致提交不了代码, 最开始想着是不是能够在本地替换js文件从而绕过bug
最新iframe替代方案,前端,html,前端,javascript,开发语言,经验分享简单搜索后找到了 chrome浏览器F12调式,修改替换js文件这篇博客, 简单试了下虽然能替换成功但是效果不理想, 改不了平台就只能适应平台了, 反手就改掉了自己代码里面的iframe标签

iframe替代方案

一. 使用object标签替代

我们可以使用 HTML 中的 object标签在网页中嵌入外部资源。我们可以使用标签在我们的网页中显示另一个网页。 object 标签是 HTML 中 iframe 标签的替代品。我们可以使用标签来嵌入不同的多媒体组件,如图像、视频、音频等。 object 标签有一个属性 data,我们可以在其中定义要嵌入的网页的 URL。我们甚至可以使用 widthheight 属性设置容器的宽度和高度。

示例代码:文章来源地址https://www.toymoban.com/news/detail-611044.html

<object data="https://theuselessweb.com/"
width="800"
height="800"
type="text/html">
</object>

二. 使用embed标签替代

embed 标签类似于 object 标签,用于相同的目的。我们可以使用 object 标签在我们的网页中嵌入各种外部资源。我们可以嵌入 PDF、图像、音频、视频和网页等媒体。标签定义了一个容器,我们可以在其中嵌入我们想要的内容。object 标签是一个自闭合标签。我们可以使用 src 属性来指定要嵌入的网页的 URL。该标签有一个 type 属性来指定要嵌入的内容类型。我们可以类似地定义高度和宽度,与 object 标签相同。注意: embed标签可用于flash文件或者在使用video标签不成功的情况下使用,不兼容移动端,只支持pc端

示例代码:

<embed type="video/webm" src="video.mp4" width="10" height="10">

三. 使用video标签替代

如果加载资源是视频的话可以使用video标签替代, video标签可以兼容移动端和PC端, 支持Ogg, MPEG4, WebM 三种格式的视频

示例代码:

<video width="10" height="10" controls>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</vide>

参考

  1. chrome浏览器F12调式,修改替换js文件
  2. 三种视频播放标签(video,embed,iframe)
  3. HTML 中 iframe 的替代方案

到了这里,关于Html代替<iframe>标签的三种方法<object>, <embed>和<video>的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • iframe/window.open/a三种标签打开新页面或新窗口设置请求头;实现免密登录

    对于前端来说,一般在登录获取token之后会把token存入缓存以及放置在Request Headers请求头中,但是使用iframe/window.open/a这三种标签打开新页面或新窗口是没有办法把请求头带过去的,这个时候就需要自己设置请求头,有如下有两种办法: 方法一(不推荐): 第一种方法可以说是最

    2024年02月12日
    浏览(62)
  • HTML中CSS的三种写法

    原文网址:HTML中CSS的三种写法_IT利刃出鞘的博客-CSDN博客 本文介绍在前端HTML中写CSS的三种方法。 有内联样式、内部样式、外部样式。优先级为:内联样式 内部样式 外部样式。当同一个样式在不同位置定义时,会使用优先级高的样式。 行内样式,又叫做标签样式,写在标签

    2024年02月13日
    浏览(80)
  • html嵌套html的两种方法( iframe,load)

    src:你要导入的html scrolling:  是否开启滚屏 frameborder:  是否设置边框 style:设置样式 获取某个div的id或者class调用load方法 里面填写要嵌套html的路径就可以了

    2024年02月15日
    浏览(53)
  • 加密文档的三种基本方法

    一、Windows系统自带的加密工具:       1、找到一个word文档,对其进行加密:        2、在选择的word文档上右击,并选择最下方的属性,进入属性界面       3、在属性界面点击高级,进入高级属性界面,找到“机密内容以便于保护数据”并选择它,最后在高级属性和wor

    2024年02月05日
    浏览(47)
  • 提取人脸特征的三种方法

    安装dlib方法: https://blog.csdn.net/hhhhhhhhhhwwwwwwwwww/article/details/121470556 思路: 1、使用dlib.get_frontal_face_detector()方法检测人脸的位置。 2、使用 dlib.shape_predictor()方法得到人脸的关键点。 3、使用dlib.face_recognition_model_v1()方法提取特征。 新建face_embedding1.py,插入代码: predictor_path是

    2024年02月07日
    浏览(45)
  • Java延时的三种方法

    一、Robot,Thread和Timer 打印: 二、补充: 关于方法二的 this.cancel() ; 解释: 取消此计时器任务。如果任务已计划一次执行,但尚未运行,或尚未计划,则它将永远不会运行。如果任务已计划重复执行,则它将永远不会再次运行。(如果此调用发生时任务正在运行,则任务将运

    2024年02月16日
    浏览(45)
  • 快速排序的三种实现方法

    快速排序的单趟排序 快速排序的单趟排序:是以一个数作为基准值,实现将数组中比基准数小的数放在基准值的左侧,比基准值大的数放在基准值的右侧。 方法一:霍尔法 霍尔法的由来:霍尔是一个人的名字,他是最初发现快速排序的人,所以,它使用的单趟排序算法被称为

    2024年01月25日
    浏览(42)
  • python中的三种注释方法

    在编写程序中,使用注释不会影响程序代码的执行,但可以使得代码通俗易懂,便于维护, 在python,一共有三种注释方法 法一 单行注释,使用#注释,一般放于句首,或者放在代码语句之后,要被注释的代码之前 例如: 法二 对于多行注释,使用单行注释效率不高,所以用三

    2024年02月02日
    浏览(52)
  • 脱离文档流的三种方法

            什么是脱离文档流呢?可以这样理解,本来这个标签是属于文档流管理的,那么它应该按照文档流的正常布局方式从左至右从上之下,并且符合标签本身的含义。         脱离文档流是指,这个标签脱离了文档流的管理。不受文档流的布局约束了,并且更重要

    2024年02月15日
    浏览(35)
  • 动态VALN的三种划分方法

    VLAN的概念 VLAN(Virtual Local Area Network)的中文名为\\\"虚拟局域网\\\"。VLAN是一种将局域网设备从逻辑上划分成一个个网段,从而实现虚拟工作组的新兴数据交换技术。这一新兴技术主要应用于交换机和路由器中,但主流应用还是在交换机之中。但又不是所有交换机都具有此功能,

    2024年02月07日
    浏览(81)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包