web-dev-qa-db-ja.com

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

これは、これを行うにはかなり貧弱な方法のようです。誰かが埋め込まれたページを変更する「正しい」方法を知っていますか？

ありがとう！

[〜＃〜] edit [〜＃〜]：以下の回答に対する回答として、現在使用しているページの完全なソースを以下に示します。 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ページです。

javascripthtmlobject
18
Tim C

これが私が最終的に達成した方法です。できるよ

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

または多分

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

Object要素には「readyState」プロパティもあり、これを使用して、含まれているページが「読み込み中」または「完了」しているかどうかを確認できます。

2
Tim C

setAttribute でそれを行うことができます

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

編集：DOMが読み込まれたことを確認するためにwindow.onloadを使用することもお勧めします。そうしないと、DOM内のオブジェクトにアクセスできなくなります。

これは次のようなものになる可能性があります。

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

window.onload = changeData;

Window.onloadについての詳細を読むことができます ここ

9
andi

これはブラウザのバグのようです。setAttribute()は動作するはずです。私はこの回避策を見つけました、これはすべてのブラウザで機能するようです：

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

上記のソリューションは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 );
3
Israel Gav

これはあなたの目的を達成するためのより良い方法だと思います。

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');
1
Dale Corns
 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);
1
user7288989

Chromeでも機能する非常にシンプルなソリューションを見つけました。トリックは、オブジェクト（または親要素）を非表示にし、データ属性を変更してから、オブジェクトを再び表示することです。

以下のコードでは、object_elementがオブジェクト要素で、parent_elementが親であり、urlがデータのURLであると想定しています。

parent_element.style.display = 'none'; // workaround for Chrome
object_element.setAttribute('data', url);
parent_element.style.display = '';
1
user2802253
<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（））;

1
German B

User2802253に続いて、私はこれをSafariとFirefoxで使用していますが、これも強制的に再描画します。 （申し訳ありませんが、単純なコメントとして投稿するには評判が不十分です）。

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

別の方法として、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;
0
MikeT

この問題の主な理由は、ローカルファイルで「/」を使用することです。

間違ったコード：

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

適切なコード：

 var obj = document.getElementById("hostedhtml");
 obj.setAttribute('data', "pages\\page2.html");
0
user9921837
var content_area = document.getElementById("contentarea");
    content_area.data = newUrl;

Chromeバージョン42.0.2311.90 mでオブジェクトを更新します

0
Anthony Halsted

データ属性の変更は簡単です。ただし、すべてのブラウザで完全に機能するとは限りません。

コンテンツが常にHTMLである場合、iframeを使用しないのはなぜですか？

0
Nick

私の場合、このスニペットは仕事をしました

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

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

  parent.removeChild(object );
  parent.appendChild(clone );
0
rahul shukla