Question

我有一个包含Object标签的HTML页面，用于托管一个嵌入式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。

Answer 1

这是我最终实现的方法。你也可以做到。

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

或许（huò xǔ）

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

对象元素还具有一个 readyState 属性，可用于检查包含的页面是正在加载还是已完成。

Answer 2

你可以使用setAttribute来做到。

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

EDIT: It is also recommended that you use the window.onload to ensure that the DOM has loaded, otherwise you will not be able to access objects within it.

这可能是这样的：

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

window.onload = changeData;

你可以在这里阅读更多关于window.onload的内容。

Answer 3

这似乎是浏览器的错误，setAttribute()应该可以正常工作。我发现了这个解决方法，它在所有浏览器中都有效。

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

Answer 4

以上解决方案在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 );

Answer 5

我找到了一個非常簡單的解決方案，也可以在Chrome中使用。這個技巧是使對象（或父元素）隱藏，更改數據屬性，然後再次使對象可見。

在以下代码中，假设object_element是对象元素，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

 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 8

这个片段在我的情况下完成了任务。

  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 9

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

$( #myob ).html($( #myob ).html());的中文翻译是：$( #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

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

HTML：

<div id="mytemplate"><div>

Sorry, I need more context to accurately translate "Js" into Chinese.

function changeTemplate(t){
var mytemplate = document.getElementById("mytemplate");
mytemplate.innerHTML =  <object type="text/html" data=  + t +  ></object> ;
}
changeTemplate( template.html );
changeTemplate( whatever.html );

Answer 13

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

刷新在Chrome版本42.0.2311.90 m中的对象。

Answer 14

这个问题的主要原因是在本地文件中使用“/”。

错误代码。

 var obj = document.getElementById("hostedhtml");
 obj.setAttribute( data , "pagespage2.html");

正确的代码

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

友情链接