HTML CSS JAVASCRIPT PYTHON PYTHON2 JAVA C C++ C# SQL Excel Linux AI BOOTSTRAP PHP 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

如何使用 HTML 页面内的 </iframe> 标签创建内联框架?

front end scriptsjavascriptweb development

<iframe> 标签也称为内联框架，可帮助我们在网页上的另一个文档内加载外部对象。<iframe> 就像网页内的迷你网络浏览器，它允许我们将来自其他来源的内容包含到我们的网页中。它们通常用于将 Google 地图嵌入到网站或广告感知的联系页面中，或将 Youtube 视频添加到网页中，这有助于我们将用户吸引到我们的网页。

语法

向网页添加 iframe 的基本语法可以使用 −

<iframe src="URL"></iframe>

<iframe> 的 src 属性标签需要一个 URL，该 URL 最终指向我们想要嵌入的外部对象或网页的位置。

下面的特定代码将在当前网页中嵌入 tutorialspoint 的 Youtube 视频。

示例

<!DOCTYPE html>
<html>
<head>
   <title>Creating an in line frame in HTML web page </title>
</head>
<body>
   <h1>Welcome to Tutorialspoint </h1>
   <div>
      <h3>Creating a simple inline frame (iframe)</h3>
      <p>Document content goes here...</p>       
   </div>
   <iframe src="https://www.youtube.com/embed/y0aCH5pimmg"></iframe>
</body>
</html>

如上所示，使用"src"属性，我们能够将视频嵌入到网页中。除了 HTML 的全局属性之外，还有其他属性可以帮助我们创建无缝 iframe。

调整 iframe 的宽度和高度

iframe 的默认宽度为 300 CSS 像素，高度为 150 像素。为了更改这些尺寸，我们使用"width"和"height"属性。默认情况下，属性值以 CSS 像素为单位设置(除了 CSS 像素之外，百分比也可用于设置 iframe 的尺寸)。

示例

为了更好地理解这一点，让我们考虑下面的例子。

<!DOCTYPE html>
<html>
<head>
   <title>Creating an in line frame in HTML web page </title>
</head>
<body>
   <h1>Welcome to Tutorialspoint </h1>
   <div>
      <h3>Creating a simple inline frame (iframe) </h3>
      <p>Document content goes here...</p>
   </div>
   <iframe src="https://www.youtube.com/embed/y0aCH5pimmg" height='300' width='600'></iframe>
</body>
</html>

示例

按照示例，我们使用百分比来设置 iframe 的高度和宽度。

<!DOCTYPE html>
<html>
   <head>
      <title>Creating an in line frame in HTML web page </title>
   </head>
   <body>
      <h1>Welcome to Tutorialspoint </h1>
      <div>
         <h3>Creating a simple inline frame (iframe) </h3>
         <p>Document content goes here...</p>
      </div>
      <iframe src="https://www.youtube.com/embed/y0aCH5pimmg" height='50%' width='70%'></iframe>
   </body>
</html>

Example

CSS 样式也可用于设置 iframe 的高度和宽度。

<!DOCTYPE html>
<html>
<head>
   <title>Creating an in line frame in HTML web page </title>
</head>
<body>
   <h1>Welcome to Tutorialspoint </h1>
   <div>
      <h3>Creating a simple inline frame (iframe) </h3>
      <p>Document content goes here...</p>
   </div>
   <iframe src="https://www.youtube.com/embed/y0aCH5pimmg" style=" height: 300px; width: 600px;"></iframe>
   </body>
</html>

去除 <iframe> 边框

示例

<iframe> 带有默认边框。为了去除或移除边框，最佳做法是使用 CSS 样式的 border 属性，如下所示 −

<!DOCTYPE html>
<html>
<head>
   <title>Creating an in line frame in HTML web page </title>
</head>
<body>
   <h1>Welcome to Tutorialspoint </h1>
   <div>
      <h3>Creating a simple inline frame (iframe) </h3>
      <p>Document content goes here...</p>
   </div>
   <iframe src="https://www.youtube.com/embed/y0aCH5pimmg" style=" height: 300px; width: 600px; border:none"></iframe>
</body>
</html>

示例

为了更好地理解这一点，让我们应用我们选择的边框并渲染 iframe。

<!DOCTYPE html>
<html>
<head>
   <title>Creating an in line frame in HTML web page </title>
</head>
<body>
   <h1>Welcome to Tutorialspoint </h1>
   <div>
      <h3>Creating a simple inline frame (iframe) </h3>
      <p>Document content goes here...</p>
   </div>
   <iframe src="https://www.youtube.com/embed/y0aCH5pimmg" style=" height: 300px; width: 600px; border:5px solid orange "></iframe>
</body>
</html>

注意 − 以前，"frameborder"属性用于设置 iframe 的边框。此属性已被弃用，并且不再受 Web 浏览器支持。

<iframe> 作为链接目标

要设置在 iframe 内打开的链接，我们使用 <a> 或 <form> 或 <base> 元素的"target"属性。

您指定的链接目标属性必须引用 iframe 的名称属性(在任何给定点，两个元素的"name"和"target"的值都应该相同)。当点击具有该名称作为值的目标属性的链接时，链接的资源将在该 iframe 中打开。

示例

为了更好地理解这一点，让我们尝试一个例子 -

<!DOCTYPE html>
<html>
<head>
   <title>Creating an in line frame in HTML web page </title>
   <style>
      iframe {
         width: 100%;
         height: 250px;
      }
   </style>
</head>
<body>
   <h1>Welcome to Tutorialspoint </h1>
   <div>
      <h3>Creating a simple inline frame (iframe) </h3>
      <a href="https://www.tutorialspoint.com/market/courses" target="myFrame">Click here to open  courses at Tutorialspoint </a>
      <p>Document content goes here...</p>
   </div>
   <iframe src="https://www.tutorialspoint.com/html/menu.htm" name="myFrame"></iframe>
</body>
</html>

上面的示例显示了一个 <iframe>，其 name 属性设置为"myWebFrame"，并且 <a> target 属性设置为"myWebFrame"。一旦我们点击链接，它就会在 <a> 的 href 属性中打开 Web URL标签位于 iframe 内。

iframe 的安全问题

尽管 iframe 已经存在很长时间并且被广泛使用，但是仍存在一些可能为攻击者打开大门的安全风险。

我们将列出使用 iframe 之前需要注意的一些安全威胁

  • iframe 注入
  • 跨框架脚本
  • 点击劫持
  • iframe 网络钓鱼
  • 对话框威胁

支持 iframe 的浏览器

Web 浏览器
Google Chrome 完全支持
Edge 完全支持
Firefox支持(但如果将 iframe 元素添加到页面时被隐藏，则存在阻止 iframe 加载的错误。)
Internet Explorer 完全支持
Opera 完全支持
Safari 支持(但如果将 iframe 元素添加到页面时被隐藏，则存在阻止 iframe 加载的错误。)
移动版浏览器
Chrome Andriod 完全支持
Firefox Andriod 支持(由于错误，resize CSS 属性对此元素没有任何影响)
Opera Andriod 完全支持
Safari iOS 支持(但如果 iframe 元素在添加到页面时被隐藏，则存在阻止 iframe 加载的错误。)
Samsung Internet 完全支持
Webview Andriod 全面支持

相关文章

打印 ❮ 上一节