如何从对象标签中获取HTML元素？

Question

如何从对象标签中获取HTML元素？

30

我正在使用object标签在一个html页面中加载一个html片段。

我的代码大致如下：

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

预期的是，在页面加载后一些元素会添加到对象标签之间。我想获取这些元素，但似乎无法访问它们。

我尝试了以下方法

$("object").html()  
$("object").children()
$("object")[0].innerHTML

这些方法似乎都不起作用。还有其他方法可以获取这些元素吗？

编辑：

一个更详细的例子：

考虑一下这个。

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

如果我尝试获取对象内的HTML，我得到一个空字符串。

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

- Noam

$("object") 返回了什么东西吗？ - Alexander Zinchenko

如果我猜得对的话，你可能正在使用IE浏览器，对吗？ - AmGates

是的，$("object")会返回一些东西。而且拜托，我不会用IE。 - Noam

8个回答

11

innerHTML 提供了访问位于 <object> 和 </object> 标签之间的html的方式。问题在于如何获取由对象加载的html，以及它所产生的窗口/框架内部的内容（与标签之间的代码无关）。

对此我也在寻找答案，但恐怕目前还没有找到。如果我找到了，我会回来在这里发帖，但是我已经花费很长时间在寻找（不只是我一个人）。

- georgosn

不会这么说。问题要求在对象标签之间的元素。听起来不像是前端的确切HTML，OP只想知道所有在其中的元素，并尝试使用innerHTML得到这些元素的父级。甚至不清楚OP是否事先知道元素名称，但很可能是这样。那么这个答案就是完全错误的。踩。 - questionto42

4

不，无法访问跨源iframe！

- AHmedRef

踩一下。得到高赞的答案可行（已测试）。这个应该取消采纳。 - questionto42

3

我知道这是一个旧问题，但是我还是来回答一下...

我在个人网站上使用了这个方法，并最终用它实现了一些工作项目。以下是我如何连接到SVG DOM的方法。请注意，您需要在对象标记加载后运行此方法（因此您可以使用onload函数触发它）。对于非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;
};

如果您想从dom中获取svg的符号元素，您的onload函数可能如下所示：

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

- Rexx Magnus

你是否使用 document.getElementById(elementID) 来检查 typeof elementID === 'string' 的字符串，然后再运行函数？或者你不使用最高票答案中的 document.querySelector() 函数，而是使用 document.getElementById() 函数，还有其他原因吗？ - questionto42

1

@questionto42standswithUkraine - 我在示例中明确传递了元素的字符串id。当然，如果您想要，您可以传递不同类型的选择器，只要它返回适当的对象，因为用于id检查的参数检查它是否为字符串。该示例并不打算成为通用答案，因为有许多方法可供选择。 - Rexx Magnus

2

试试这个：

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

- Mandeep Pasbola

$('object').contents() 对我返回 [] - Noam

$('object').contents() 是一个集合，你需要在该对象内搜索元素。 - Mandeep Pasbola

1

尝试使用以下代码：$('object').contents().find('html').html(); - Mandeep Pasbola

获取到 null 值，请检查我上面所做的修改，即使我在 JS 周围添加 setTimeout 仍然无法获取 HTML 内容。 - Noam

由于您的编辑中没有对象标记内的HTML，因此出现了空值。 - Mandeep Pasbola

1

你可以使用以下代码来读取对象数据，一旦对象完全加载且属于相同域名：

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

希望这有所帮助！

- shabbir.rang

-2

更新

我使用了这行JavaScript代码来改变iFrame内部输入框的值，该代码取自如何使用document.getElementById选择iFrame内的元素：

document.getElementById('iframeID').contentWindow.document.getElementById('inputID').value = '你的值';

在你的情况下，由于你没有框架，并且你想要获取而不是设置值，例如可以通过以下方式记录它：

console.log(document.getElementById('object').value);

如果你猜测或选择一个元素：

console.log(document.getElementById('object').data);

- Praneeth Nidarshan

问题是关于如何获取标签内元素的值，而不是如何将值注入到标签元素中。您需要编写console.log(...'inputID').value)而不是.value = 'Your Value';。这样就可以回答问题了。此外，这与框架无关。无论如何，虽然我只测试了最高投票答案的document.querySelector()函数，但您的应该也能像链接中一样正常工作。已编辑并点赞。 - questionto42

-2

这里有一段可以正常工作的代码示例。不确定你的代码出了什么问题。

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

- rAm

1

问题是关于访问在对象标签内动态生成的HTML内容。它不要求访问静态放置在对象标签内的内容。 - Ritwik Sen

踩一下也没关系。作为一个初学者，我这样理解：它并没有帮助解决答案，因为JavaScript必须在HTML对象标签之后，然后询问该标签中的内容。在这里，JavaScript位于标签之前，将“testing”注入标签的innerHTML中。这是个好主意，但会让问题变得模糊不清。 - questionto42

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- blabla · Accepted Answer

只要您将其放在同一域上，就可以执行以下操作：

HTML

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

JavaScript

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

由于问题略微不清楚，不确定它是否也涉及元素，而不仅仅是整个innerHTML：您可以使用以下方法显示您所知道或猜测的元素值：

console.log(htmlDocument.data);