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

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

iframe是HTML5中唯一允许的框架类型，这些框架本质上是您“嵌套”的页面的一部分。在您从页面中剪出的空间中，然后可以在外部网页中调用。实质上，iframe就是设置在网页内部的另一个浏览器窗口。你可以在需要包含外部内容的网站上找到常用的iFrame，比如百度地图或优酷视频，这两个流行的网站都在他们的嵌入代码中使用iframe。在网站建设或者一些B/S系统的网站开发中，iframe应用颇为广泛频繁。这也是本文讨论的主题，接下来让我们一起看看在html5技术下，网站建设时iframe调用方法与注意事项。

如何使用IFRAME元素

该元素使用HTML5全局元素以及其他几个元素。四个也是HTML 4.01中的属性：

来源URL
窗口高度
窗口宽度
窗口名称

HTML5中有三个新特性：

srcdoc-帧来源的HTML，此属性优先于src属性中的任何URL
沙箱-框架窗口中应允许或不允许的功能列表
无缝-告诉用户代理应该呈现iframe，就像它是父文档的不可见的一部分一样

要构建简单IFrame，请设置源URL以及宽度和高度：

Alternate text if the iframe cannot be rendered

请注意，您可以选择不对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中打开，而不是在当前窗口中打开。你自己试试，在网页中键入以下内容：

This is my iframe
When you click this link it will open a new document inside the above window.

如果在iFrame中打开的文档没有设置任何目标，则所有这些链接将在与父文档相同的iframe中打开。可以使用此功能使一个IFRAME中的链接更改同一页上另一个IFRAME的内容。

iFrame和安全

IFRAME元素本身不会对您或您的读者构成安全风险。不幸的是，iframe已经得到了坏名声，因为它们可以被恶意网站用来包含内容，这些内容可以感染访问者的计算机，而不会在页面上看到它。这是通过让链接指向不可见的iframe并通过这些脚本触发恶意代码来完成的。用户单击该链接，并认为该链接已中断，因为似乎没有发生任何事情，但脚本被设置在他们看不到它的地方。

也有计算机病毒，将注入一个看不见的iframe到您的网页，有效地将您的网站变成一个僵尸网络。他们可以通过SQL注入和其他攻击来实现这一点。在网页上包含iframe时要记住的一点是，您的用户仅与您链接到的所有站点的内容一样安全。如果你有理由认为一个网站是不值得信任的，不要以任何方式链接到它，更不要把它的内容包含在IFRAME中。但是，在iframe中链接到您自己的页面并不会给您或您的用户带来安全风险。

新闻名称：html5技术下网站建设时iframe调用方法与注意事项
新闻来源：/news/155184.html

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

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

猜你还喜欢下面的内容

网站建设设计怎样做才最有利于整站营销？ 2022-05-19
企业网站建设中遇到问题并不可怕只要能够妥善解决 2022-05-19
星空体育app最新版本(2024已更新)建设中有哪些必不可少的功能？ 2022-05-19
除去价格在网站建设时还有四个问题你必须注意 2022-05-19
企业网站建设需要做好哪些准备 2022-05-19
合肥网站建设需要注意哪些呢？静心了解一下吧 2022-05-19
网站建设：网站怎么设计才对搜索引擎友好 2022-05-19
网站建设时不应仅仅关注设计制作本身服务器选择也很重要 2022-05-19