为什么 document.getElementById().setAttribute 在 Chrome 和 IE 中无法正常工作？答案

【问题标题】：Why is document.getElementById().setAttribute not working correctly in Chrome and IE?为什么 document.getElementById().setAttribute 在 Chrome 和 IE 中无法正常工作？
【发布时间】：2012-05-16 15:58:23
【问题描述】：

我正在使用以下功能：

function pdfChanger(location){ document.getElementById("pdf").setAttribute("data",location); }

这里称为：

<a href="javascript:pdfChanger('documents/SecurityDocs/sample.pdf')">test1</a><br/>

并且旨在改变这个对象中显示的pdf文件：

<object id="pdf" data="documents/sample2.pdf#toolbar=0&navpanes=0&scrollbar=0&page=1&view=FitHtop" 
                    type="application/pdf"></object>

在 Firefox 中，点击调用此功能的链接会正确更改 pdf 对象。但是，在 chrome 中，您必须在单击链接后单击 pdf，才能正确显示更改后的 pdf。在 IE 中，pdf 完全没有变化。为什么会发生这种情况？我该怎么做才能使此功能在所有浏览器中统一工作？

【问题讨论】：

更改属性有什么不同吗？说“数据路径”或类似的东西。 developer.mozilla.org/en/DOM/element.setAttribute 提到了一些保留字，虽然它们只提到了“价值”，但最好排除它。

标签： javascript function pdf object setattribute

【解决方案1】：

设置属性值并不能保证重新呈现 html 元素。

如果我们改变 img 标签的宽度或高度，我们总是会看到重新渲染的图像。

如果我们改变一个img标签的id，浏览器需要重新渲染图像吗？我不这么认为，但某些浏览器可能会。

从渲染的角度来看，对象标签的

'data' 属性可能因浏览器而异。它被视为“数据”或“源 URL”。

为了保证元素的渲染，最好重写整个元素。您可以创建/添加元素或使用 innerHTML。例如，

document.getElementById('object_div').innerHTML='<object id="pdf" ...></object>'

【讨论】：