如何从对象标签中获取 html 元素？答案

【问题标题】：How to get html elements from an object tag?如何从对象标签中获取 html 元素？
【发布时间】：2012-02-06 14:20:07
【问题描述】：

我正在使用 object 标签在 html 页面中加载 html sn-p。

我的代码看起来是这样的：

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

【问题讨论】：

$("object") 有什么回报吗？
如果我猜对了，你可能使用的是 IE 浏览器吧？
是的 $("object") 返回一些东西。来吧，我没有使用 IE

标签： javascript jquery html

【解决方案1】：

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

HTML

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

JavaScript

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

【讨论】：

【解决方案2】：

innerHTML 将提供对位于<object> 和</object> 之间的html 的访问。所问的是如何获取它正在生成的窗口/框架内的对象加载的html（它与打开和关闭标记之间的代码无关）。

我也在寻找这个问题的答案，恐怕没有。如果我找到了，我会回来并在这里发布，但我正在寻找（而不是独自一人）很多时间。

【讨论】：

【解决方案3】：

不，不可能访问跨域框架！

【讨论】：

【解决方案4】：

试试这个：

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

【讨论】：

$('object').contents() 为我返回 []
$('object').contents() 是一个集合，您必须在该对象中搜索一个元素
尝试使用：$('object').contents().find('html').html();
get null，检查我上面所做的编辑，即使我在js周围添加setTimeout仍然无法获取里面的html
因为在您的编辑中没有 html 内的 object 标签，所以为 null。

【解决方案5】：

我知道这是一个老问题，但这里是......

我在个人网站上使用了它，并最终在一些工作项目中实现了它，但这就是我连接 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');
}

【讨论】：

【解决方案6】：

这里有一段有效的示例代码。不确定您的代码有什么问题。

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

【讨论】：

【解决方案7】：

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

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

希望这会有所帮助！

【讨论】：

【解决方案8】：

更新

我使用这行 Javascript 来更改 iFrame 内的输入字段的值，

document.getElementById('iframeID').contentWindow.document.getElementById('inputID').value = 'Your Value';

参考： https://stackoverflow.com/a/14451440/3452102

【讨论】：