更改IFrame字体样式/大小/颜色

Question

我想改变IFrame内文本的字体、颜色和大小。这些文本存储在本地的.txt文件中。该如何进行操作呢？

- Vespher

---

请发布与您的问题相关的JavaScript/jQuery、CSS和HTML。使用以下任何一个或全部服务创建演示： jsFiddle.net， CodePen.io， Plunker.co， JS Bin 或代码片段（位于文本编辑器工具栏上的第7个图标或CTRL+M）。包含iframe的页面（称其为parent.html）和iframe内部的页面（称其为child.html）是否都在同一文件夹/目录（同一域）中？ - zer00ne

那么你正在在一个框架中显示一个文本文件？并且想要更改文本文件的CSS吗？如果是这样，则不行。但是，如果将文本文件制作为HTML，则可以。或者读取文本文件的内容并将其放置在div内（或在iframe主体内），然后可以更改其CSS。 - Rajshekar Reddy

如果文件位于同一服务器上，您可能希望在具有ID的div内使用PhP include('text.tx');。 - G-Cyrillus

Answer 1

您可以通过以下代码实现：

<iframe id="myFrame" src="text.txt"></iframe>

<script>
var frame = document.getElementById('myFrame');
    frame.onload = function () {
        var body = frame.contentWindow.document.querySelector('body');
        body.style.color = 'red';
        body.style.fontSize = '20px';
        body.style.lineHeight = '20px';
    };
</script>

- Dmitriy

---

你确定可以更改 TEXT 文件的 CSS 吗？ - Rajshekar Reddy

是的，我已经在Chrome、Firefox和Opera中尝试了这段代码，它可以正常工作 :) 文本文件的内容将成为正文的内容。 - Dmitriy

好的，嗯，有趣。那么如果文本文件中有脚本部分会发生什么？它会被执行吗？ - Rajshekar Reddy

如问题中提到的那样，文件扩展名是.txt，因此在iframe内部只是纯文本。 - Dmitriy

很好的回答，但问题提出者要求一个.txt文件。 - FLAK-ZOSO

Answer 2

为了做到这一点，最简单的方法是直接在文件中包含样式。

只需将您的文本文件更改为 .html 文件，并使用样式标签通过 css 更改页面的外观。

例如，您的样式标签可能如下所示：

<style>
body{
   font-family: sans-serif;
   color: red;
   font-size: 2em;
}
</style>

这将使用默认的无衬线字体和红色文本颜色创建相当大的文本。

- robinp7720

Answer 3

这是不可能的。由于安全问题，涉及更改/操纵网站数据/版权/登录信息等，Chrome、Firefox和所有其他主要浏览器都不支持此功能。但是，像@DmitriyLoskutov提到的那样，在较小或几乎不知名的浏览器中会起作用。否则，由于安全原因，无法更改不属于您自己或不在同一页上的页面的内容、样式或脚本。有一些JavaScript库可以绕过这种限制，但使用它们是不明智的，因为它们可能是有害的脚本，并违反浏览器使用条款。最好的方式始终是从文件内部进行样式设置。您最好的做法是创建一个带有文本的html文件，然后进行样式设置（如@robinp7720所述）。

- Cannicide

---

此外，@DmitriyLoskutov的代码可以在旧版本的浏览器和旧版HTML中运行，但是HTML5和4不允许修改iframe内容... - Cannicide