样式化对象/嵌入的内容答案

【问题标题】：Style the content of an object/embed样式化对象/嵌入的内容
【发布时间】：2017-10-11 21:51:17
【问题描述】：

我正在开发一个小型 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 中，我看到对象的内容是一个 #document，它在 pre 中显示 base64 .txt 的内容。所以我尝试设置pre 的样式，但只有object 标记之外的pre 标记采用它们，而不是它内部的标记：

pre {
  font-size: 32px;
}

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

【问题讨论】：

pre 上的样式将不适用，因为您可能会注意到您的对象的行为类似于 iframe。所以你的风格就达不到了。

标签： html css object-tag

【解决方案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>

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

【讨论】：