html - 样式对象的内容/嵌入

Question

我正在开发一个小型 Web 应用程序，其中有一个 object 元素(包含一个 embed)，用于显示小型文档。

文档可以是 PDF 或纯文本文件 (.txt)，我以 base64 字符串的形式从 Web 服务获取这些文件。然后，为了显示内容，我分别更新了 object 和 embed 的 data 和 src 属性。最终结果看起来像这样(简化):

object {
  border: 1px solid #ccc;
  width: 300px;
  height: 100px;
}

<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
  <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>

所有 PDF 看起来都不错(浏览器使用插件加载它们)，但我在处理文本文件时遇到了一些问题。 .txt 的内容显示正确，但文字看起来有点小，让我把它放大。

我尝试更改 object 和 embed 的字体大小，但内容不受其影响:

object, embed {
  font-size: 32px;
}

在Chrome中，我看到对象的内容是一个#document，在pre中显示了base64.txt的内容。所以我尝试设置 pre 的样式，但只有 object 标签之外的 pre 标签采用它们，而不是其中的标签:

pre {
  font-size: 32px;
}

是否可以为 object/embed 的内容赋予样式？怎么做到的？

Answer 1

这是一个伪解决方案，它适用于 firefox(本地)而不适用于 chrome。这个想法是访问对象的内容并在其头部附加一个自定义 CSS。此解决方案的问题是您将在某些浏览器中面临跨源问题，因为该对象的行为类似于包含外部内容的 iframe。

注意:我使用 setTimeout 来确保在加载对象内容后运行该函数

function addCss() {
	$('object').contents().find("head").append($("<style type='text/css'>pre{font-size:32px;}</style>"));
}

setTimeout(function(){addCss()},2000);

object {
  border: 1px solid #ccc;
  width: 300px;
  height: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh">
  <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" />
</object>

也许您的问题将是如何避免这种跨源问题，因为内容将是您的和来自同一站点的服务器。