在HTML中更改对象标签上的数据内容 [英] Changing data content on an Object Tag in HTML
问题描述
< object style = 我有一个HTML页面，其中包含一个用于托管嵌入式HTML页面的Object标记。 border：none; standby =loadingid =contentarea
width =100％height =53％type =text / htmldata =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>测试< /标题>
< script language =JavaScript>
函数doPage（）
{
var objTag = document.getElementById（contentarea）;
if（objTag！= null）
{
objTag.setAttribute（'data'，'Test2.html'）;
alert（'页面应该改变'）;
}
}
< / script>
< / head>
< body>
< form name =Form1method =POST>
< p>< input type =buttonvalue =点击更改页面onclick =doPage（）; />< / p为H.
< object style =visibility：visible; border：none; standby =loading dataid =contentareatitle =loadingwidth =100％height =53％type =text / htmldata =test1.html>< / object>
< / form>
< / body>
< / html>
Test1.html和Test2.html页面只是显示文本'Test1'的简单HTML页面， 'Test2'。
以下是我最终实现的方式。您可以这样做：
$ b
document.getElementById（contentarea）。object.location.href = url;
或者可能
的document.getElementById（ 含量 - ）object.parentWindow.navigate（URL）。
Object元素还有一个'readyState'属性，可用于检查包含的页面是否'loading'或'complete'。
I have an HTML page which contains an Object tag to host an embedded HTML page.
<object style="border: none;" standby="loading" id="contentarea"
width="100%" height="53%" type="text/html" data="test1.html"></object>
However, I need to be to change the HTML page within the object tag. The current code seems to create a clone of the object and replaces the existing object with it, like so:
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);
}
This seems a rather poor way of doing this. Does anyone know the 'correct' way of changing the embedded page?
Thanks!
EDIT: In response to answers below, here is the full source for the page I am now using. Using the setAttribute does not seem to change the content of the Object tag.
<!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>
The Test1.html and Test2.html pages are just simple HTML pages displaying the text 'Test1' and 'Test2' respectively.
Here's how I finally achieved it. You can do
document.getElementById("contentarea").object.location.href = url;
or maybe
document.getElementById("contentarea").object.parentWindow.navigate(url);
The Object element also has a 'readyState' property which can be used to check whether the contained page is 'loading' or 'complete'.
这篇关于在HTML中更改对象标签上的数据内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
