Modification des données de contenu sur un Objet de la Balise HTML

J'ai une page HTML qui contient une balise Object pour l'accueil d'un incorporé de la page HTML.

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

Cependant, j'ai besoin d'être à modifier la page HTML dans la balise object. Le code actuel semble créer un clone de l'objet et remplace l'objet existant avec elle, 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 une assez mauvaise façon de le faire. Personne ne sait la "bonne" façon de changer la page intégrée?

Merci!

MODIFIER: En réponse aux réponses ci-dessous, voici la totalité du code source de la page je suis maintenant en utilisant. À l'aide de la 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>

L'Test1.html et Test2.html les pages sont de simples pages HTML contenant le texte 'Test1' et 'Test2', respectivement.

InformationsquelleAutor Tim C | 2009-03-24
  1. 9

    Vous pouvez le faire avec setAttribute

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

    EDIT:
    Il est également recommandé que vous utilisez la fenêtre.onload pour s'assurer que le DOM est chargé, sinon vous ne serez pas en mesure d'accéder à des objets à l'intérieur.

    Il pourrait être quelque chose comme ceci:

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

window.onload = changeData;

    Vous pouvez en savoir plus sur la fenêtre.onload ici

    • Je ne peux pas obtenir que cela fonctionne pour le moment pour une raison quelconque. L'objet affiche toujours l'ancienne page. Je vais poster l'intégralité de la page HTML, je suis à l'aide plus tard si je n'ai pas de Eureka moments.
    • Mais c'est le sélecteur de travail? Si vous alert(document.getElementById("contentarea")) que faut-il dire? Si elle dit non défini, alors le DOM n'est pas chargé. Vous devez utiliser le document.onload. Je vais l'ajouter dans ma réponse parce que les personnages ne sont pas assez.
    • setAttribute() ne fonctionne pas pour moi non plus. La valeur ne change pas dans le dom inspector, mais le rendu du contenu de la <object> balise n'est pas mise à jour.
    • setAttribute a fonctionné comme un charme!! Bien que j'ai été en utilisant cette méthode pour afficher un document PDF.
    InformationsquelleAutor andi
  2. 7

    Cela semble être un bug lié au 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 + '"');
    InformationsquelleAutor Abhi Beckert
  3. 3

    Les solutions ci-dessus ne fonctionne pas correctement dans Firefox, la balise d'Objet n'est pas de rafraîchissement pour une raison quelconque. Mon objet tags afficher les images SVG.

    Ma solution de travail pour cet été afin de remplacer l'Objet nœud avec 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 );
    InformationsquelleAutor Israel Gav
  4. 2

    Voici comment j'ai enfin atteint. Vous pouvez faire

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

    ou peut-être

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

    L'Objet d'un élément a un "readyState' une propriété qui peut être utilisé pour vérifier si le contenu de la page est "chargement" ou "complète".

    • Cela n'a pas fonctionné pour moi. Les deux object.location et object.parentWindow ne sont pas définis.
    InformationsquelleAutor Tim C
  5. 1

    J'ai trouvé une solution très simple qui fonctionne également en Chrome. Le truc, c'est de faire d'un objet (ou d'un élément parent) invisible, de modifier les données d'attribut, puis faire l'objet de nouveau visible.

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

    parent_element.style.display = 'none'; //workaround for Chrome
object_element.setAttribute('data', url);
parent_element.style.display = '';
    InformationsquelleAutor user2802253
  6. 1

    Suivantes user2802253, j'utilise celui-ci sur Safari et Firefox, ce qui oblige également un redessiner. (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";
    InformationsquelleAutor wessel
  7. 1

    Je pense que c'est la meilleure façon 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');
    • Il ne fonctionne pas assez! Désolé, mais j'ai mis moins que la réponse.
    InformationsquelleAutor Dale Corns
  8. 1
     var obj = document.getElementById("pdfDoc");
 obj.setAttribute('data', newPdf);

    travaillé sur la version Chrome 54 et Safari, mais ne fonctionne pas sur 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);
    InformationsquelleAutor user7288989
  9. 1
    <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());

    InformationsquelleAutor German B
  10. 0

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

    Si le contenu est toujours en HTML pourquoi ne pas utiliser un iframe?

    • Je suis informé par mon chef de projet, L'élément iframe n'est pas pris en charge en HTML 4.1 DTD Strict et en XHTML 1.0 Strict de la DTD et que donc, il ne veux pas les utiliser, le grand meanie.
    • vous n'avez jamais aller n'importe où sur un projet, suivant les normes...
    InformationsquelleAutor
  11. 0

    Antoher façon de le faire, vous pourriez intégrer l'objet dans un 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;
    InformationsquelleAutor MikeT
  12. 0

    JS:

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

    Actualise objet dans la Version Chrome 42.0.2311.90 m

    InformationsquelleAutor Anthony Halsted
  13. 0

    la raison principale de ce problème est l'utilisation de "/" 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");
    InformationsquelleAutor user9921837
  14. 0

    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 );
    InformationsquelleAutor rahul shukla