我试图将PDF文档嵌入HTML视图中，并使用Knockout ViewModel提供文档的URL。我认为正确的HTML元素是<object>，因此我有以下观点：
<div class="documentviewerpdf">
<object data-docType="pdf" data-bind="attr: { 'data': EmbedPDFLink }" type="application/pdf" width="100%" />
</div>
以及以下作为视图模型：
function AppViewModel() {
this.EmbedPDFLink = "http://acroeng.adobe.com/Test_Files/browser_tests/embedded/simple5.pdf";
}
ko.applyBindings(new AppViewModel());
这会在Chrome，Chrome Canary（均使用本机Chrome PDF插件）和Firefox 27（Adobe Reader XI插件）中显示PDF，但是所有这三种浏览器均在屏幕顶部的栏中显示警告。Chrome的Could not load Chrome PDF Viewer颜色为黄色并指出该状态，而Firefox的颜色为灰色并带有信息图标并指出this PDF document might not be displayed correctly。相同的代码在IE9上将插件加载为空。
如果我用包含PDF文档硬编码URLdata-bind的直接data属性替换该属性，则Chrome和Firefox可以正确显示，而IE9则什么也不显示，甚至没有空插件。
我也尝试过data使用中的一个<param>元素来设置属性<object>，这在所有这些浏览器中都根本不起作用。
我也尝试过使用<embed>标记，尽管在IE9中也可以提供类似的结果，但是在语义上似乎并不正确。但是，embed元素文档指出任何属性都传递给了插件-鉴于元素是如此相似，是否有可能将该data-bind属性传递给了PDF插件，并导致了此问题？
看来，硬编码data-bind版本和版本之间唯一的区别在于data-bind后者上存在属性，因此我认为这是插件的问题，因为dataURL属性设置正确。
有没有一种方法可以data使用Knockout在对象上设置属性，而又不在data-bind那里保留属性？有谁知道避免这种问题的另一种方法？
使用绑定可以隐藏所有属性，直到评估了源路径为止。该插件会看到您的其他属性，并认为您的元素不好。
data-bind="attr: { 'each-attribute-here': true }"
在评估值之前，Chrome会很快识别您的PDF。将插件正在寻找的所有属性都绑定到绑定中。
您还可以在此处使用自定义绑定来添加属性并传递PDF位置的值。此自定义绑定处理程序不应直接将HTML注入DOM。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句