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

У меня есть 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); 
}

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

Спасибо!

EDIT. В ответ на приведенные ниже ответы, вот полный источник для страницы, которую я сейчас использую. Использование 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" соответственно.

Ответы

Ответ 1

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

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

или, возможно,

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

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

Ответ 2

Вы можете сделать это с помощью 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 здесь

Ответ 3

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

var newUrl = 'http://example.com';
var objectEl = document.getElementById('contentarea');
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"');

Ответ 4

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

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

parent_element.style.display = 'none'; // workaround for Chrome
object_element.setAttribute('data', url);
parent_element.style.display = '';

Ответ 5

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

theObject.style.visibility = null;
theObject.setAttribute("data", url);
theObject.style.visibility = "visible";

Ответ 6

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

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');

Ответ 7

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

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

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

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

parent.removeChild(object );
parent.appendChild(clone );

Ответ 8

 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);

Ответ 9

Изменение атрибута данных должно быть простым. Тем не менее, он может не работать отлично во всех браузерах.

Если контент всегда HTML, почему бы не использовать iframe?

Ответ 10

Как это сделать, вы можете вставить объект в DIV

var newUrl = 'http://example.com';
var divEl = document.getElementById('divID');
var objEl = document.getElementById('objID');
objEl.data = newUrl;
// Refresh the content
divEl.innerHTML = divEl.innerHTML;

Ответ 11

var content_area = document.getElementById("contentarea");
    content_area.data = newUrl;