2

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

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

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，它以 .txt 格式显示 base64 .txt 的内容pre。所以我尝试设置样式pre，但只有pre标签外的object标签才能使用它们，而不是它里面的标签：

pre {
  font-size: 32px;
}

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

4

1 回答 1

-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>

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

于 2017-10-11T23:10:09.137 回答