首页 > 其他分享 >在HTML5中有什么可以替代iFrame

在HTML5中有什么可以替代iFrame

时间:2023-06-01 23:08:34浏览次数:68  
标签:Web 替代 交互 HTML HTML5 iFrame 组件 方法


最佳解决方法

通常有4种方法可以将HTML嵌入到网页中:

  • <iframe> iframe的内容完全位于当前页面不同的上下文中。虽然这是一个很棒的功能,而且是不同浏览器版本之间兼容最好的,但是它也带来了额外的问题(将frame大小跟网页内容设置一致比较麻烦)。
  • AJAX。可以使用XMLHttpRequest对象来检索数据并将其注入到页面中。这不是最理想的方法,因为它依赖于脚本技术,从而可能使执行速度变慢,同时,过程也比较复杂,其他缺点
  • Hacks。很少这样做,不是很可靠。
  • HTML5 Web组件。作为Web组件的一部分,HTML Imports允许将HTML文档绑定到其他的HTML文档中。这包括HTMLCSSJavaScript或任何其他.html文件可以包含的内容。这使得它成为一个很好的解决方案,有许多有趣的用例:将应用程序拆分成捆绑的组件,将其作为构建块进行分发;更好地管理依赖关系以避免冗余,代码组织等。下面是一个简单的例子:
<link rel="import" href="http://example.com/elements.html">

 

 

次佳解决方法

Html5中没有完全等同的东西。 <iframe>元素在HTML5中仍然有效。根据您需要的确切交互,可能会有不同的API。例如有postMessage方法,它允许您实现跨域JavaScript交互。但是,如果你想显示跨域的HTML内容(使用CSS样式,并与javascript交互),iframe是一个很好的方法。

 

第四种解决方法

可以使用对象并嵌入,如下所示:

<object data="http://www.web-source.net" width="600" height="400">
    <embed src="http://www.web-source.net" width="600" height="400"> </embed>
    Error: Embedded data could not be displayed.
</object>

 

第五种方法

object在HTML5中是一个简单的选择:

<object data="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width="400" height="300" type="text/html">
    Alternative Content
</object>

也可以试试embed

<embed src="https://blogs.claritycon.com/blog/2016/03/bower-packages-asp-net-core-1-0/" width=200 height=200 />

 

标签:Web,替代,交互,HTML,HTML5,iFrame,组件,方法
From: https://blog.51cto.com/u_14671216/6398482

相关文章

  • mac everything的替代品——fzf使用,速度还是很快的!!!
    fzf模糊搜索神器的安装和使用fzf是一个通用的命令行模糊查找器,通过输入模糊的关键词就可以定位文件或文件夹。结合其他工具(比如rg)可以完成非常多的工作,在工作中可以大幅提高你的工作效率。fzf可以用于文件、命令历史记录、进程、主机名、书签、git提交等。1.fzf使用1.1安装 ......
  • HTML5 CANVAS 弹幕插件
    概述修改了普通弹幕运动的算法,新增了部分功能详细修改了普通弹幕运动的算法,新增了部分功能,具体请参看附件里的CHANGELOG.md和README.md一、概述说实话,从第二版到现在又过了半年,本来以为可能不会写第三版的,顶多将第二版的代码重构下就可以了,没想到还是花了一个星期左......
  • 速度挑战 - 2小时完成HTML5拼图小游戏
    概述我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。详细初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大......
  • HTML5的Canvas画图模拟太阳系运转
    今天研究的是利用HTML5的Canvas画图来模拟太阳系运转,首先,在这个太阳系里分为画轨道和画星球两个部分,对于每一个星球我们要知道它的颜色和公转周期,如下图。  采用面向对象编程的思想,代码如下 stars.html<!DOCTYPEHTML><html> <head></head> <body> <canvasid="canvas"......
  • js判断本页面被 iframe 嵌套
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device......
  • DPU54可替代AU9254串口USB1.1 hub芯片
    产品概述DPU54是一款高性能、低功耗4口全速USB1.1HUB控制器,上行端口兼容全速12MHz模式,4个下行端口兼容全速12MHz、低速1.5MHz两种模式。DPU54采用状态机单事务处理架构,而非单片机架构,多个事务缓冲区,这样减小了芯片的系统响应时间,用最少的硬件资源实现了USB1.1全速传......
  • 芯片国产替代_逻辑石渔_2023年04月15日_微头条-今日头条
    芯片国产替代_逻辑石渔_2023年04月15日_微头条-今日头条https://www.toutiao.com/w/1763203960560653/?app=&timestamp=1681525210&use_new_style=1&tt_from=system&utm_source=system&utm_medium=toutiao_android&utm_campaign=client_share&share_token=56e4643f......
  • GPT-4替代数据分析师只要几千块
    GPT-4替代初级数据分析师的成本只有0.71%,换成高级数据分析师则是0.45%……你没看错,是百分之零点七一,不是百分之七十一。按新加坡行情,年薪8.6万-9万美元(60-63万人民币)的高级数据分析师,换成GPT-4就只需要三四百美元(2000多人民币)了。这项结论来自阿里达摩院与新加坡南洋理工大学......
  • python操作mysql数据pymysql-执行语句select查询返回值直接返回dict字典类型或者list
    一、返回tuple元组类型(默认)fetchall()将结果放在二维数组里面,每一行的结果在元组里面importpymysqldefexport(table_name):conn=pymysql.connect(host='118.24.3.40',user='jxz',password='123456',db......
  • 超低功耗段码LCD液晶显示屏驱动IC-VKL144A/B QFN48 超小体积封装,可完全替代PCF8551适
    VKL144A/B概述:VKL144A/B是一个点阵式存储映射的LCD驱动器,可支持最大144点(36SEGx4COM)的LCD屏。单片机可通过I2C接口配置显示参数和读写显示数据,可配置4种功耗模式,也可通过关显示和关振荡器进入省电模式。其高抗干扰,低功耗的特性适用于水电气表以及工控仪表类产品。QT921功能特点......