设置对象/嵌入内容的样式

Question

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

这些文档可以是PDF或纯文本文件(.txt)，它们是我从web服务中以base64字符串的形式获得的。然后，为了显示内容，我分别更新了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中，我看到对象的内容是一个#文档，它在pre中显示base64.txt的内容。所以我试着设计pre的样式，但只有object标签之外的pre标签可以使用它们，而不是里面的标签：

pre {
font-size: 32px;
}

是否可以为object/embed的内容指定样式？怎么能做到呢？

Answer 1

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

NB：我使用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>

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