☰

HTMLのオブジェクトタグのデータコンテンツを変更する 質問する

tag-icon • tag-icon javascript html object
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); 
}

これはかなり悪い方法のようです。埋め込まれたページを変更する「正しい」方法を誰か知っていますか?

ありがとう！

編集: 以下の回答への返答として、現在使用しているページの完全なソースを以下に示します。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 ページは、それぞれ「Test1」と「Test2」というテキストを表示する単純な HTML ページです。

ベストアンサー1

これはブラウザのバグのようですが、setAttribute()動作するはずです。すべてのブラウザで動作すると思われる次の回避策を見つけました。

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

おすすめ記事