Почему document.getElementById(). SetAttribute не работает корректно в Chrome и IE?

Question

Я использую следующую функцию:

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 не меняется вообще. Почему это происходит и что я могу сделать, чтобы эта функция работала одинаково во всех браузерах?

Answer 1

Установка значения атрибута не гарантирует повторного рендеринга элемента html.

Если мы изменим ширину или высоту тега img, мы всегда видим изображение, повторно отображаемое.

Как изменить идентификатор тега img, нужно ли браузеру повторно отображать изображение? Я так не думаю, но в некоторых браузерах.

«атрибут данных» тега объекта можно считать иначе, чем браузер от браузера с точки зрения рендеринга. он рассматривается как «данные» или «исходный url».

Чтобы гарантировать рендеринг элемента, вам лучше переписать весь элемент. Вы можете создать/добавить элемент или использовать innerHTML. Например,

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