Javascript 如何从对象标签中获取 html 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8798745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get html elements from an object tag?
提问by Noam
I'm using the object tag to load an html snippet within an html page.
我正在使用对象标记在 html 页面中加载 html 片段。
My code looks something along these lines:
我的代码看起来像这样：
<html><object data="/html_template"></object></html>
<html><object data="/html_template"></object></html>
As expected after the page is loaded some elements are added between the object tags. I want to get those elements but I can't seem to access them.
正如预期的那样，页面加载后，对象标签之间会添加一些元素。我想获取这些元素，但似乎无法访问它们。
I've tried the following
$("object").html()$("object").children()$("object")[0].innerHTML
我试过以下
$("object").html()$("object").children()$("object")[0].innerHTML
None of these seem to work. Is there another way to get those elements?
这些似乎都不起作用。有没有另一种方法来获取这些元素？
EDIT:
编辑：
A more detailed example:
一个更详细的例子：
consider this
考虑这个
<html><object data="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"></object></html>
<html><object data="http://www.YouTube.com/v/GGT8ZCTBoBA?fs=1&hl=en_US"></object></html>
If I try to get the html within the object I get an empty string.
如果我尝试在对象中获取 html，则会得到一个空字符串。
采纳答案by AHméd Net
No , it's not possible to get access to a cross-origin frame !
不，不可能访问跨域框架！
回答by blabla
As long as you place it on the same domain you can do the following:
只要将它放在同一个域中，就可以执行以下操作：
HTML
HTML
<html>
<object id="t" data="/html_template" type="text/html">
</object>
</html>
JavaScript
JavaScript
var t=document.querySelector("#t");
var htmlDocument= t.contentDocument;
回答by georgosn
The innerHTMLwill provid access to the html which is in between the <object>and </object>. What is asked is how to get the html loaded by the object inside the window/frame that it is producing (it has nothing to do with the code between the open and close tags).
在innerHTML将provid访问是在之间的HTML<object>和</object>。所问的是如何让对象在它正在生成的窗口/框架内加载 html（它与打开和关闭标签之间的代码无关）。
I'm also looking for an answer to this and I'm afraid there is none. If I find one, I'll come back and post it here but I'm looking (and not alone) for a lot of time now.
我也在寻找这个问题的答案，恐怕没有。如果我找到一个，我会回来把它贴在这里，但我现在正在寻找（而不是一个人）很多时间。
回答by Rexx Magnus
I know this is an old question, but here goes ...
我知道这是一个老问题，但这里是......
I used this on a personal website and eventually implemented it in some work projects, but this is how I hook into an svg's dom. Note that you need to run this after the object tag has loaded (so you can trigger it with an onload function). It may require adaptation for non-svg elements.
我在个人网站上使用了它，并最终在一些工作项目中实现了它，但这就是我连接到 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;
};
If you wanted to grab the symbol elements from the dom for the svg, your onload function could look like this:
如果您想从 svg 的 dom 中获取符号元素，您的 onload 函数可能如下所示：
function loadedsvg(){
var svg = hooksvg('mysvgid');
var symbols = svg.document.getElementsByTagName('symbol');
}
回答by shabbir.rang
You could use the following code to read object data once its loaded completely and is of the same domain:
一旦对象数据完全加载并且属于同一域，您可以使用以下代码读取对象数据：
HTML-
HTML-
<html>
<div class="main">
<object data="/html_template">
</object>
</div>
</html>
Jquery-
jQuery-
$('.main object').load(function() {
var obj = $('.main object')[0].contentDocument.children;
console.log(obj);
});
Hope this helps!
希望这可以帮助！
回答by Mandeep Pasbola
Try this:
尝试这个：
// wait until object loads
$('object').load(function() {
// find the element needed
page = $('object').contents().find('div');
// alert to check
alert(page.html());
});
回答by rAm
Here goes a sample piece of code which works. Not sure what the problem is with your 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>
回答by Praneeth Nidarshan
UPDATED
更新
I used this line of Javascript to change the value of a input filed inside an iFrame,
我使用这行 Javascript 来更改 iFrame 中输入的值，
document.getElementById('iframeID').contentWindow.document.getElementById('inputID').value = 'Your Value';
document.getElementById('iframeID').contentWindow.document.getElementById('inputID').value = 'Your Value';
Reference: https://stackoverflow.com/a/14451440/3452102
