Tim*_*m C 18 html javascript object
我有一个HTML页面,其中包含一个Object标记来托管嵌入的HTML页面.
<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'.
您可以使用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的更多信息
这似乎是一个浏览器错误,setAttribute()应该工作.我找到了这个解决方法,它似乎适用于所有浏览器:
var newUrl = 'http://example.com';
var objectEl = document.getElementById('contentarea');
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"');
上述解决方案在 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 );
这就是我最终实现这一目标的方法。你可以做
document.getElementById("contentarea").object.location.href = url;
或者可能
document.getElementById("contentarea").object.parentWindow.navigate(url);
Object 元素还有一个“readyState”属性，可用于检查所包含的页面是“正在加载”还是“已完成”。