Iframe 继承自父级页面-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，Iframe 是一种强大而实用的技术，它可以在一个网页中嵌入另一个网页。Iframe 可以用于很多场景，比如显示第三方内容、内嵌广告、实现跨域通信等。然而，在使用 Iframe 的时候，我们经常会遇到一个问题：如何让 Iframe 继承父级页面的样式、事件等信息呢？

如何让 Iframe 继承父级页面的样式？

在默认情况下，Iframe 是一个独立的 HTML 页面，它不会继承父级页面的样式。但是，我们可以通过一些技巧来实现这个目标。

方法一：使用 CSS 样式表

首先，我们可以在父级页面中定义一些通用的 CSS 样式，然后在 Iframe 中引用这些样式。具体来说，可以在父级页面中添加如下代码：

<head>
  <link rel="stylesheet" type="text/css" href="common.css">
</head>

然后，在 Iframe 中也添加相同的代码即可：

<head>
  <link rel="stylesheet" type="text/css" href="common.css">
</head>

这样做的好处是可以减少重复的 CSS 代码，并且可以统一管理样式。

方法二：使用 JavaScript

除了使用 CSS 样式表外，我们还可以使用 JavaScript 来实现 Iframe 的样式继承。具体来说，可以在父级页面中添加如下代码：

window.onload = function() {
  var iframe = document.getElementById("myiframe");
  var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
  var style = window.getComputedStyle(document.body);
  iframeDoc.body.style.fontFamily = style.getPropertyValue("font-family");
  iframeDoc.body.style.fontSize = style.getPropertyValue("font-size");
};

这段代码会将父级页面的字体和字号设置到 Iframe 中。

如何让 Iframe 继承父级页面的事件？

如果要让 Iframe 继承父级页面的事件，我们可以使用 JavaScript 来实现。具体来说，可以在父级页面中添加如下代码：

window.onload = function() {
  var iframe = document.getElementById("myiframe");
  var iframeWin = iframe.contentWindow || iframe;
  var parentFunc = function() { alert("Hello, world!"); };
  iframeWin.parentFunc = parentFunc;
};

这段代码会将一个名为 parentFunc 的函数绑定到 Iframe 的 contentWindow 对象上。然后，在 Iframe 中就可以通过调用 parent.parentFunc() 来触发这个函数了。

需要注意的是，由于跨域安全限制的存在，上述方法只能在同源的情况下使用。

总结

本文介绍了如何让 Iframe 继承父级页面的样式和事件。通过 CSS 样式表和 JavaScript 技巧，我们可以很方便地实现这个目标。如果你在使用 Iframe 的时候遇到了类似的问题，可以尝试使用本文中的方法来解决。

示例代码：

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25650