web-dev-qa-db-fra.com

Modification du contenu des données sur une balise d'objet au format HTML

J'ai une page HTML qui contient une balise Object pour héberger une page HTML incorporée.

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

Cependant, je dois changer la page HTML dans la balise object. Le code actuel semble créer un clone de l'objet et remplace l'objet existant par celui-ci, comme suit:

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

Cela semble être une mauvaise façon de procéder. Est-ce que quelqu'un connaît la manière «correcte» de changer la page incorporée?

Merci!

EDIT: En réponse aux réponses ci-dessous, voici le code source complet de la page que je suis en train d’utiliser. L'utilisation de setAttribute ne semble pas modifier le contenu de la balise 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>

Les pages Test1.html et Test2.html ne sont que de simples pages HTML affichant le texte "Test1" et "Test2" respectivement.

javascripthtmlobject
18
Tim C

Voici comment j'ai finalement réussi. Tu peux faire

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

ou peut-être

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

L'élément Object possède également une propriété 'readyState' qui peut être utilisée pour vérifier si la page contenue est 'en cours de chargement' ou 'complète'.

2
Tim C

Vous pouvez le faire avec setAttribute

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

EDIT: Il est également recommandé d'utiliser window.onload pour vous assurer que le DOM est chargé, sinon vous ne pourrez pas accéder aux objets qu'il contient.

Cela pourrait être quelque chose comme ça:

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

window.onload = changeData;

Vous pouvez en savoir plus sur window.onload here

9
andi

Cela semble être un bug du navigateur, setAttribute() devrait fonctionner. J'ai trouvé cette solution de contournement, qui semble fonctionner dans tous les navigateurs:

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

Les solutions ci-dessus ne fonctionnaient pas correctement dans Firefox, la balise Object n’actualisant pas pour une raison quelconque. Mes tags d'objet affichent des images SVG.

Ma solution de travail pour cela consistait à remplacer le nœud complet de l'objet par un clone:

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

Je pense que c'est un meilleur moyen d'atteindre votre objectif.

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

a fonctionné sous Chrome version 54 et Safari, mais n'a pas fonctionné sous IE 11

ce qui a fonctionné sur tous 

 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

J'ai trouvé une solution très simple qui fonctionne également dans Chrome. L'astuce consiste à rendre l'objet (ou un élément parent) invisible, à modifier l'attribut de données, puis à rendre l'objet visible à nouveau.

Dans le code ci-dessous, on suppose que object_element est l'élément object et que parent_element est le parent et url est l'URL des données.

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

Après user2802253, j’utilise celui-ci sur Safari et Firefox, ce qui oblige également un rafraîchissement. (désolé, pas assez de réputation pour poster comme un simple commentaire).

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

Une autre façon de le faire, vous pouvez incorporer l’objet dans une 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

la principale raison de ce problème utilise "/" dans les fichiers locaux.

Le mauvais code:

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

Le bon code:

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

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

Actualise l'objet dans la version de Chrome 42.0.2311.90 m

0
Anthony Halsted

Changer l'attribut de données devrait être facile. Cependant, cela peut ne pas fonctionner parfaitement sur tous les navigateurs.

Si le contenu est toujours au format HTML, pourquoi ne pas utiliser un iframe? 

0
Nick

Cet extrait a fait le travail dans mon cas

  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