Question

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

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

＆＃13;

embed

＆＃13;

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

＆＃13;

所有PDF看起来都不错（浏览器使用插件加载它们），但是我遇到了一些文本文件的问题。 .txt的内容显示正确，但文本看起来有点小，我被要求将其放大。

我尝试更改<object type="text/plain" data="data:text/plain;base64,SGVsbG8gV29ybGQh"> <embed type="text/plain" src="data:text/plain;base64,SGVsbG8gV29ybGQh" /> </object>和object的字体大小，但内容不受其影响：

embed

在Chrome中，我看到对象的内容是一个#document，它在object, embed { font-size: 32px; }中显示base64 .txt的内容。所以我尝试设置pre的样式，但只有pre标记之外的pre标记才会显示它们，而不是其中的标记：

object

是否可以为pre { font-size: 32px; } / object的内容提供样式？怎么可能呢？

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>

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

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

1 个答案: