15

我想知道 HTML iframe 是否可以从其父级继承 CSS 数据：

主.html

<html>
  <head>
   <style>
     .highlight{
       background: #008fcc;
      }
   </style>
  </head>
 <body>
   <iframe src='frame.html'></iframe>
 </body>
</html>

框架.html

hello <font class='highlight'>
4

2 回答 2

14

简短回答：不，iframes通常不能从其父页面继承/访问样式/脚本。

长答案：iframe 如果它来自另一个域，您无法更改样式中的任何内容或执行其中的脚本（您甚至无法通过 JavaScript 读取其 DOM 内容）。

另一方面，如果它来自与您的父页面相同的域，您可以通过在您的父页面中执行类似的操作来更改元素的样式或执行脚本（此示例使用 jQuery，但它可以用普通的JavaScript）：

$("#iframe_id").contents().find("#some_div").css({color: "rgb(0, 162, 232)"}); //changed style of a div inside the iframe

要执行内部定义的函数iframe：

$("#iframe_id").contents().document.functionName(functionParams);

希望有帮助！

于 2012-09-02T12:10:36.477 回答
5

您可以使用 iframe 上的 html5无缝布尔参数来获取它。

https://developer.mozilla.org/en-US/docs/HTML/Element/iframe

但目前它还没有在任何现代浏览器中完全实现。

更简单的解决方案是将所有 CSS 放在一个单独的文件中，并将其包含在主页和 iframed 页面中。

于 2012-09-02T12:24:17.633 回答