javascript - 我如何通过该页面的 iframe 内的 javascript 控制页面？

Question

我有一个带有 Js 代码的 iframe 要运行，但我不想控制 iframe DOM 选项和 css 样式。
我该怎么做？如果你不想使用 jQuery，那没关系，但我更喜欢纯 JavaScript...

我要修改的内容:
- 框架边框
- css 样式( float 、显示、位置、溢出)
- 没有滚动条

编辑:代码在 iframe内部运行

谢谢

Answer 1

根据您之前的问题，我假设 iframe 内的文档不与外围页面位于同一域中。

在这种情况下，您的选择非常有限，同样是因为 Same Origin Policy 。您将无法通过 Javascript 访问外围页面的元素或 CSS。其中包括 <iframe>该页面上的元素。

因此，您必须将任何设计决策内联到iframe中标签:

<iframe frameborder="0" style="float: left; width: 500px; height: 200px ....">

我认为这适用于您提到的所有内容，除了滚动条行为:您可以使用 body 控制 iframe 文档内部。元素的overflow属性。

想到的唯一替代想法是让嵌入您的 iframe 的网站也包含来自 head 中您的域的样式表。该文档的部分。当然，您可以完全控制 CSS。

如果您将该 CSS 中的设计规则限制在您的 iframe 中(例如，通过使用 #id 选择器)，那也可以。缺点是，如果样式表没有被包含进来，你的iframe就会崩溃。这就是大多数小部件提供商使用内联 CSS 的原因。