Question

我有一个HTML页面，其中包含一个用于托管嵌入式HTML页面的Object标记。

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

但是，我需要更改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'。

Answer 1

您可以使用setAttribute

执行此操作

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

编辑：还建议您使用window.onload来确保已加载DOM，否则您将无法访问其中的对象。

可能是这样的：

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

window.onload = changeData;

您可以阅读有关window.onload here

的更多信息

Answer 2

这似乎是一个浏览器错误，setAttribute()应该有效。我找到了这个解决方法，它似乎适用于所有浏览器：

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

Answer 3

以上解决方案在Firefox中无法正常运行，Object标签因某些原因无法刷新。我的对象标签显示SVG图像。

我的工作解决方案是用克隆替换整个Object节点：

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

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

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

Answer 4

这是我最终实现它的方式。你可以做到

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

或者

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

Object元素还有一个'readyState'属性，可用于检查包含的页面是“加载”还是“完成”。

Answer 5

我找到了一个非常简单的解决方案，也适用于Chrome。诀窍是使对象（或父元素）不可见，更改数据属性，然后再次使对象可见。

在下面的代码中，假设object_element是object元素，parent_element是父元素，url是数据的url。

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

Answer 6

在user2802253之后，我在Safari和Firefox上使用了这个，这也强制重绘。（对不起，没有足够的声誉作为一个简单的评论发布）。

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

Answer 7

我认为这是实现目标的更好方法。

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

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

Answer 9

WHERE

$（'＃myob'）。html（$（'＃myob'）。html（））;

Answer 10

更改数据属性应该很容易。但是，它可能无法在所有浏览器上完美运行。

如果内容始终是HTML，为什么不使用iframe？

Answer 11

另一种方法，你可以将对象嵌入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;

Answer 12

＆＃13;

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

＆＃13;

刷新Chrome版本42.0.2311.90 m

中的对象

Answer 13

the main reason of this issue is using "/" in local files.

The Wrong Code :

 var obj = document.getElementById("hostedhtml");
 obj.setAttribute('data', "pages\page2.html");

The Right Code :

 var obj = document.getElementById("hostedhtml");
 obj.setAttribute('data', "pages\\page2.html");

Answer 14

此代码段在我的情况下完成了工作

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

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

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

在HTML中更改对象标记的数据内容

14 个答案: