web-dev-qa-db-fra.com

Comment obtenir des éléments HTML à partir d'une balise d'objet?

J'utilise la balise object pour charger un extrait de code HTML dans une page HTML.

Mon code ressemble à ceci:

<html><object data="/html_template"></object></html>

Comme prévu après le chargement de la page, des éléments ont été ajoutés entre les balises d'objet ..__ Je souhaite obtenir ces éléments, mais il me semble impossible d'y accéder.

J'ai essayé ce qui suit $("object").html()$("object").children()$("object")[0].innerHTML

Aucun de ceux-ci ne semble fonctionner. Y a-t-il un autre moyen d'obtenir ces éléments?

MODIFIER:

Un exemple plus détaillé:

considère ceci

<html><object data="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"></object></html>

Si j'essaie d'obtenir le code HTML dans l'objet, je reçois une chaîne vide.

http://jsfiddle.net/wwrbJ/1/

javascriptjqueryhtmlhtml5
18
Noam

Non, il n'est pas possible d'avoir accès à un cadre cross-Origin!

1
AHméd Net

Tant que vous le placez sur le même domaine, vous pouvez effectuer les opérations suivantes:

HTML

<html>
    <object id="t" data="/html_template" type="text/html">
    </object>
</html>

JavaScript

var t=document.querySelector("#t");
var htmlDocument= t.contentDocument;
14
blabla

La innerHTML fournira un accès au code HTML situé entre le <object> et le </object>. Ce qui est demandé, c'est comment obtenir le code HTML chargé par l'objet à l'intérieur de la fenêtre/du cadre qu'il produit (cela n'a rien à voir avec le code entre les balises open et close).

Je cherche aussi une réponse à cela et j'ai bien peur qu'il n'y en ait pas. Si j'en trouve un, je reviendrai et le posterai ici mais je cherche (et pas seul) depuis longtemps maintenant.

11
georgosn

Je sais que c'est une vieille question, mais voilà ...

Je l'ai utilisé sur un site Web personnel et l'ai finalement intégré dans certains projets de travail, mais c'est comme cela que je m'accroche au domaine d'un svg. Notez que vous devez l'exécuter après le chargement de la balise d'objet (pour pouvoir la déclencher avec une fonction onload). Cela peut nécessiter une adaptation pour les éléments non-svg.

function hooksvg(elementID) { //Hook in the contentDocument of the svg so we can fire its internal scripts
   var svgdoc, svgwin, returnvalue = false;
   var object = (typeof elementID === 'string' ? document.getElementById(elementID) : elementID);
   if (object && object.contentDocument) {
      svgdoc = object.contentDocument;
   }
   else {
      if (typeof object.getSVGDocument == _f) {
         try {
            svgdoc = object.getSVGDocument();
         } catch (exception) {
            //console.log('Neither the HTMLObjectElement nor the GetSVGDocument interface are implemented');
         }
      }
   }
   if (svgdoc && svgdoc.defaultView) {
      svgwin = svgdoc.defaultView;
   }
   else if (object.window) {
      svgwin = object.window;
   }
   else {
      if (typeof object.getWindow == _f) {
         try {
            svgwin = object.getWindow();//TODO look at fixing this 
         }
         catch (exception) {
            // console.log('The DocumentView interface is not supported\r\n Non-W3C methods of obtaining "window" also failed');
         }
      }
   }
   //console.log('svgdoc is ' + svgdoc + ' and svgwin is ' + svgwin);
   if (typeof svgwin === _u || typeof svgwin === null) {
      returnvalue = null;
   } else {
      returnvalue = svgwin;
   }
   return returnvalue;
};

Si vous voulez récupérer les éléments de symbole du dom pour le svg, votre fonction onload pourrait ressembler à ceci:

function loadedsvg(){
   var svg = hooksvg('mysvgid');
   var symbols = svg.document.getElementsByTagName('symbol');
}
0
Rexx Magnus

Essaye ça:

// wait until object loads
$('object').load(function() {
    // find the element needed
    page = $('object').contents().find('div');
    // alert to check
    alert(page.html());
});
0
Mandeep Pasbola

Vous pouvez utiliser le code suivant pour lire les données d'objet une fois qu'elles sont complètement chargées et appartiennent au même domaine:

HTML-

<html>
<div class="main">
<object data="/html_template">
</object>
</div>
</html>

Jquery-

$('.main object').load(function() {
    var obj = $('.main object')[0].contentDocument.children;
    console.log(obj);
});

J'espère que cela t'aides!

0
shabbir.rang

Voici un exemple de code qui fonctionne. Vous ne savez pas quel est le problème avec votre code.

<html>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script type="text/javascript">
    $(document).ready(function(){
            var k = $("object")[0].innerHTML;
            alert(k);
            $("object")[0].innerHTML = "testing";
        });
 </script>
<object data="/html_template">hi</object>
</html>
0
rAm