样式对象的内容/嵌入

我正在开发一个小型web应用程序，其中我有一个用于显示小文档的object元素（包含embed）。样式对象的内容/嵌入

这些文档可以是以base64字符串形式从Web服务获得的PDF或纯文本文件（.txt）。然后，为了显示内容，我分别更新和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的内容？它怎么能做到？

来源

2017-10-11 Alvaro Montoro

pre上的样式不适用，因为您可能会注意到您的对象的行为与iframe相同。所以你的风格不会达到它。 –

这里是一个伪解决方案在Firefox（本地），而不是铬为我工作。这个想法是访问对象的内容并在其头部添加一个自定义CSS。此解决方案的问题在于，您将在某些浏览器中面临交叉源问题，因为对象的行为与包含外部内容的iframe相似。

NB：我用的setTimeout对象的内容加载

function addCss() { 
 
\t $('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-11 23:10:09

样式对象的内容/嵌入

回答

相关问题