javascript 如何在 HTML 中访问“embed”标签的内容
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8496241/
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 access the content of the "embed" tag in HTML
提问by narengi
I have an SVG file, and I don't want to paste it inside the HTML file because, well, it gets messy. So after consulting with w3schools, "embed" tag seemed the safest way to include an external SVG file into HTML.
我有一个 SVG 文件,我不想将它粘贴到 HTML 文件中,因为它会变得很乱。因此,在咨询了 w3schools 之后,“嵌入”标签似乎是将外部 SVG 文件包含到 HTML 中的最安全方法。
<embed src="path_to_svg" type="image/svg+xml" id='svgsource' />
However, I need to access the svg elements through DOM via javascript in the main html file. Unfortunately neither
但是,我需要通过主 html 文件中的 javascript 通过 DOM 访问 svg 元素。不幸的是,两者都没有
document.getElementById('my_svg_id')
nor
也不
document.getElementById('svgsource').contentDocument
works in any browser. Using "object" tag doesn't do the trick either.
适用于任何浏览器。使用“object”标签也不起作用。
采纳答案by Rich Bradshaw
Complete about turn!
完成约转!
Turns out you can, see this link: http://xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html
原来你可以,看到这个链接:http: //xn--dahlstrm-t4a.net/svg/html/get-embedded-svg-document-script.html
(Also, go and up vote some of Erik Dahlstr?m'sother answers to give him some points for me hiHymaning his answer!)
(另外,去投票Erik Dahlstr?m 的其他一些答案,给他一些分数,让我劫持他的答案!)
回答by gilly3
Use .getSVGDocument()
. This seems to work for <embed>
, <object>
and <iframe>
:
使用.getSVGDocument()
. 这似乎适用于<embed>
,<object>
并且<iframe>
:
document.getElementById('svgsource').getSVGDocument()
For <object>
or <iframe>
you can also use .contentDocument
:
对于<object>
或者<iframe>
你也可以使用.contentDocument
:
document.getElementById('svgsource').contentDocument
For IE7 or IE8, I believe you are out of luck.
对于 IE7 或 IE8,我相信你不走运。
回答by Andrew Willems
Short answer: You can try inlining the referenced SVG file content. For <object>
and <iframe>
elements, use:
简短回答:您可以尝试内联引用的 SVG 文件内容。对于<object>
和<iframe>
元素,使用:
e.parentElement.replaceChild(e.contentDocument.documentElement.cloneNode(true), e);
...where e
is the referencing element. If you absolutely need the <embed>
element then change .contentDocument
in the above code to .getSVGDocument()
(the parentheses are required). Note, however, that .getSVGDocument()
is now deprecatedand is thus not recommended, but it is already also recommended to use <object>
or <iframe>
instead of <embed>
anyway.
...e
引用元素在哪里。如果您绝对需要该<embed>
元素.contentDocument
,则将上述代码更改为.getSVGDocument()
(需要括号)。但是请注意,.getSVGDocument()
现在已弃用,因此不推荐使用,但也已推荐使用<object>
或<iframe>
代替<embed>
任何方式。
For a more complete answer, see my other SO answer on the subject.
有关更完整的答案,请参阅我关于该主题的其他 SO 答案。
回答by Neil
I believe in IE9 you can use an <iframe>
element to load SVG in which case you can access the contentDocument
property, but with previous versions of IE you may be out of luck. (Other browsers should let you use contentDocument
with <embed>
and <object>
.)
我相信在 IE9 中您可以使用一个<iframe>
元素来加载 SVG,在这种情况下您可以访问该contentDocument
属性,但是对于以前版本的 IE,您可能不走运。(其他浏览器应该允许您使用contentDocument
with<embed>
和<object>
。)
回答by Shadow2531
Have you tried with an <object> element instead? (data attribute instead of src)
您是否尝试过使用 <object> 元素?(数据属性而不是 src)