Как изменить значение атрибута данных элемента HTML Object в JavaScript - PullRequest
16 голосов
/ 29 января 2011

Как изменить значение атрибута данных элемента HTML Object в JavaScript?

Вот что я пытаюсь

<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" width="100%"></object>

 var element = document.getElementById("htmlFrame");
 element.setAttribute("data", "http://www.google.com");

Ответы [ 6 ]

40 голосов
/ 29 января 2011

Это работает:

<html>
<head></head>
<body>

<object type="text/html" id="htmlFrame" style="border: none;" standby="loading" width="100%"></object> 

<script type="text/javascript">
  var element = document.getElementById("htmlFrame"); 
  element.setAttribute("data", "attributeValue"); 
</script>

</body>
</html>

Если вы поместите это в файл, откроете в нем веб-браузер, javascript будет выполнен, и атрибут «data» + значение будет добавлено к элементу объекта..

Примечание: Если вы просто посмотрите на источник HTML, вы НЕ увидите атрибут.Это связано с тем, что браузер показывает статический источник, отправленный веб-сервером, а не динамически отображаемый DOM.Чтобы проверить DOM, используйте такой инструмент, как Firebug .Это покажет вам, какой DOM отрисован браузером, и вы сможете увидеть добавленный атрибут.

Используя Firefox + Firebug или Google Chrome, вы можете щелкнуть правой кнопкой мыши часть страницы и выполнить команду «Проверка».Элемент".Это откроет представление обработанного DOM.

12 голосов
/ 29 января 2011

и в jquery:

$('element').attr('some attribute','some attributes value')

т.е.

$('a').attr('href','http://www.stackoverflow.com/')
5 голосов
/ 01 ноября 2016

В JavaScript вы можете присвоить значения атрибутам данных через Element.dataset.

Например:

avatar.dataset.id = 12345;

Ссылка: https://developer.mozilla.org/en/docs/Web/API/HTMLElement/dataset

2 голосов
/ 04 сентября 2017
document.getElementById("PdfContentArea").setAttribute('data', path);

OR

var objectEl = document.getElementById("PdfContentArea")

objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + path + '"');
1 голос
/ 09 июля 2014

Поведение хост-объектов <object> обусловлено зависимостью от реализации ECMA262, и установка атрибута методом setAttribute() может завершиться ошибкой.

Я вижу два решения:

  1. soft: element.data = "http://www.google.com";

  2. hard: удалить объект из дерева DOM и создать новый с измененным атрибутом данных.

0 голосов
/ 01 июня 2016

Следующий код работает, если вы используете jquery

$( "object" ).replaceWith('<object data="http://www.google.com"></object>');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...