Изменение содержимого данных в теге объекта в HTML - PullRequest
Новая
       23

Изменение содержимого данных в теге объекта в HTML

18 голосов
/ 24 марта 2009

У меня есть HTML-страница, которая содержит тег Object для размещения встроенной HTML-страницы. 

<object style="border: none;" standby="loading" id="contentarea" 
 width="100%" height="53%" type="text/html" data="test1.html"></object>

Однако мне нужно изменить HTML-страницу внутри тега объекта. Текущий код, кажется, создает клон объекта и заменяет существующий объект следующим образом: 

function changeObjectUrl(newUrl)
{
    var oContentArea = document.getElementById("contentarea");
    var oClone = oContentArea.cloneNode(true); 
    oClone.data = newUrl; 

    var oPlaceHolder = document.getElementById("contentholder"); 
    oPlaceHolder.removeChild(oContentArea); 
    oPlaceHolder.appendChild(oClone); 
}

Это кажется довольно плохим способом сделать это. Кто-нибудь знает «правильный» способ изменения встроенной страницы?

Спасибо!

РЕДАКТИРОВАТЬ : В ответах на ответы ниже приведен полный источник страницы, которую я сейчас использую. Использование setAttribute, похоже, не меняет содержимое тега Object. 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script language="JavaScript">
function doPage()
{
    var objTag = document.getElementById("contentarea");
    if (objTag != null)
    {
        objTag.setAttribute('data', 'Test2.html');
        alert('Page should have been changed');
    }
}
</script>
</head>
<body>
<form name="Form1" method="POST">
<p><input type="button" value="Click to change page" onclick="doPage();" /></p>
<object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="test1.html"></object>
</form>
</body>
</html>

Страницы Test1.html и Test2.html - это простые HTML-страницы, на которых отображается текст «Test1» и «Test2» соответственно.

Ответы [ 14 ]

9 голосов
/ 24 марта 2009

Вы можете сделать это с помощью setAttribute 

document.getElementById("contentarea").setAttribute('data', 'newPage.html');

EDIT: Также рекомендуется использовать window.onload, чтобы убедиться, что DOM загружен, иначе вы не сможете получить доступ к объектам внутри него.

Это может быть что-то вроде этого: 

function changeData(newURL) {
    if(!document.getElementById("contentarea")) 
        return false;
    document.getElementById("contentarea").setAttribute('data', newURL);
}

window.onload = changeData;

Вы можете узнать больше о window.onload здесь

7 голосов
/ 18 мая 2012

Кажется, это ошибка браузера, setAttribute() должно работать. Я нашел этот обходной путь, который, кажется, работает во всех браузерах: 

var newUrl = 'http://example.com';
var objectEl = document.getElementById('contentarea');
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"');
3 голосов
/ 28 апреля 2015

Вышеуказанные решения не работали должным образом в Firefox, по какой-то причине тег Object не обновляется. Мои теги объектов показывают изображения SVG.

Мое рабочее решение для этого состояло в том, чтобы заменить весь объектный узел на клон: 

var object = document.getElementById(objectID);
object.setAttribute('data', newData);

var clone = object.cloneNode(true);
var parent = object.parentNode;

parent.removeChild(object );
parent.appendChild(clone );
2 голосов
/ 31 марта 2009

Вот как я наконец достиг этого. Вы можете сделать 

document.getElementById("contentarea").object.location.href = url;

или, может быть, 

document.getElementById("contentarea").object.parentWindow.navigate(url);

Элемент Object также имеет свойство readyState, которое можно использовать для проверки того, является ли содержащаяся страница «загружаемой» или «завершенной».

1 голос
/ 27 февраля 2019 
<div id='myob'>
<object style="border: none;" standby="loading" id="contentarea" 
 width="100%" height="53%" type="text/html" data="test1.html"></object>
</div>

$ ( '# грецкий') HTML ($ ( '# грецкий') HTML ().).

1 голос
/ 13 декабря 2016 
 var obj = document.getElementById("pdfDoc");
 obj.setAttribute('data', newPdf);

работал на Chrome версии 54 и Safari, но не работал на IE 11

что сработало на всех них 

 var obj = document.getElementById("pdfDoc");
 obj.setAttribute('data', newPdf);
 var cl = obj.cloneNode(true);
 var parent = obj.parentNode;
 parent.removeChild(obj);
 parent.appendChild(cl);
1 голос
/ 19 марта 2015

Я думаю, что это лучший способ для достижения вашей цели.

Html: 

<div id="mytemplate"><div>

Js: 

function changeTemplate(t){
var mytemplate = document.getElementById("mytemplate");
mytemplate.innerHTML = '<object type="text/html" data=' + t + '></object>';
}
changeTemplate('template.html');
changeTemplate('whatever.html');
1 голос
/ 13 февраля 2015

После user2802253 я использую этот в Safari и Firefox, что также вызывает перерисовку. (извините, недостаточно репутации для публикации в качестве простого комментария). 

theObject.style.visibility = null;
theObject.setAttribute("data", url);
theObject.style.visibility = "visible";
1 голос
/ 21 сентября 2013

Я нашел очень простое решение, которое также работает в Chrome. Хитрость заключается в том, чтобы сделать объект (или родительский элемент) невидимым, изменить атрибут данных, а затем снова сделать объект видимым.

В приведенном ниже коде предполагается, что object_element является элементом объекта, а parent_element является родителем, а url является URL-адресом данных. 

parent_element.style.display = 'none'; // workaround for Chrome
object_element.setAttribute('data', url);
parent_element.style.display = '';
0 голосов
/ 06 сентября 2018

Этот фрагмент сделал работу в моем случае 

  var object = document.getElementById(objectID);
  object.setAttribute('data', newData);

  var clone = object.cloneNode(true);
  var parent = object.parentNode;

  parent.removeChild(object );
  parent.appendChild(clone );
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...