html5技术下网站建设时iframe调用方法与注意事项

2022-05-20    分类: 网站建设


iframe是HTML5中唯一允许的框架类型,这些框架本质上是您“嵌套”的页面的一部分。在您从页面中剪出的空间中,然后可以在外部网页中调用。实质上,iframe就是设置在网页内部的另一个浏览器窗口。你可以在需要包含外部内容的网站上找到常用的iFrame,比如百度地图或优酷视频,这两个流行的网站都在他们的嵌入代码中使用iframe。在网站建设或者一些B/S系统的网站开发中,iframe应用颇为广泛频繁。这也是本文讨论的主题,接下来让我们一起看看在html5技术下,网站建设时iframe调用方法与注意事项。
如何使用IFRAME元素
该元素使用HTML5全局元素以及其他几个元素。四个也是HTML 4.01中的属性:
  1. 来源URL
  2. 窗口高度
  3. 窗口宽度
  4. 窗口名称
HTML5中有三个新特性:
  1. srcdoc-帧来源的HTML,此属性优先于src属性中的任何URL
  2. 沙箱-框架窗口中应允许或不允许的功能列表
  3. 无缝-告诉用户代理应该呈现iframe,就像它是父文档的不可见的一部分一样
要构建简单IFrame,请设置源URL以及宽度和高度:

<iframe src="URL" width="200px" height="200px">
Alternate text if the iframe cannot be rendered
</iframe>
请注意,您可以选择不对iframe的设置使用像素值,但可以决定使用百分比。如果您正在构建一个响应性网站,其大小应随屏幕大小的不同而变化,这些百分比将非常重要。也有一些属性在HTML4.01中有效,但在HTML5中过时。由于目前大多数网站都在使用HTML5+,因此这些属性是您不想使用的(但您可能会在一些遗留文档中看到这些属性)。
  • 改为使用A元素链接到说明
  • 改为使用CSS浮点属性
  • 允许透明-而不是使用CSS背景属性使ifram透明
  • 改为使用边框CSS属性
  • 边距高度-而不是使用CSS边距属性
  • 边距宽度-而不是使用CSS边距属性
  • 改为使用CSS溢出属性
支持IFrame的浏览器,几乎所有现代浏览器都支持IFRAME元素,它们分别如下:
  • Android
  • Chrome
  • Firefox
  • Internet Explorer 2+
  • iOS / Safari Mobile
  • Netscape 7+
  • Opera 3+
  • Safari
如果上面的列表中没有显示版本号,这是因为该浏览器的所有版本都支持它。需要注意的一点是,尽管所有浏览器都支持IFRAME元素,但对HTML5的某些特性的支持仍然有限。使用溢出关闭滚动不可靠。如果不希望在iFrame上使用滚动条,则应继续使用“滚动”属性。此时,任何浏览器都不支持srcdoc、沙箱和无缝属性。
与iFrames链接
当您为iframe指定名称或id时,您可以使用A元素上的属性将链接指向该帧。然后,当用户单击链接时,它将在引用的iframe中打开,而不是在当前窗口中打开。你自己试试,在网页中键入以下内容:
<iframe id="myIframe" src="http://webdesign.about.com/#lp-main" height="200px" width="500px">
<p>This is my iframe
</iframe>
<p>
When you click <a href="http://webdesign.about.com/od/iframes/a/aaiframe.htm#abt" target="myIframe">this link</a> it will open a new document inside the above window.
</p>
如果在iFrame中打开的文档没有设置任何目标,则所有这些链接将在与父文档相同的iframe中打开。可以使用此功能使一个IFRAME中的链接更改同一页上另一个IFRAME的内容。
iFrame和安全
IFRAME元素本身不会对您或您的读者构成安全风险。不幸的是,iframe已经得到了坏名声,因为它们可以被恶意网站用来包含内容,这些内容可以感染访问者的计算机,而不会在页面上看到它。这是通过让链接指向不可见的iframe并通过这些脚本触发恶意代码来完成的。用户单击该链接,并认为该链接已中断,因为似乎没有发生任何事情,但脚本被设置在他们看不到它的地方。
也有计算机病毒,将注入一个看不见的iframe到您的网页,有效地将您的网站变成一个僵尸网络。他们可以通过SQL注入和其他攻击来实现这一点。在网页上包含iframe时要记住的一点是,您的用户仅与您链接到的所有站点的内容一样安全。如果你有理由认为一个网站是不值得信任的,不要以任何方式链接到它,更不要把它的内容包含在IFRAME中。但是,在iframe中链接到您自己的页面并不会给您或您的用户带来安全风险。

网站标题:html5技术下网站建设时iframe调用方法与注意事项
网页链接:/news34/155184.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有网站建设

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

营销型网站建设