我有一个 SVG 文件，它定义了它的一些样式和 <defs>动态地使用 JavaScript。
我在 HTML 文件中使用上述 SVG 文件。
- 如果我自己打开 SVG 文件，它的 JavaScript 就会被执行。
- 如果使用 jQuery，我通过 AJAX 将 SVG 文件包含到 HTML 文件中(将 SVG 附加到 HTML 文档)，那么 SVG 的 JavaScript 也会被执行。
- 但是，使用纯 JavaScript:如果我通过 AJAX 将 SVG 文件包含到 HTML 文件中(将 SVG 附加到 HTML 文档)那么 SVG 的 JavaScript 不会被执行强>.
我正在尝试理解并修复该行为。
作为 MCVE:
ajax-callee.svg :
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
>
<script><![CDATA[
console.log( 'ajax-callee.svg › script tag' );
/** When the document is ready, this self-executing function will be run. **/
(function() {
console.log( 'ajax-callee.svg › script tag › self-executing function' );
})(); /* END (anonymous function) */
]]></script>
</svg>
ajax-caller-jquery-withSVG.html (工作正常):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>(Check out the console.)</p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$.ajax({
method: "GET",
url: "ajax-callee.svg",
dataType: "html"
}).done(function( html ) {
/** Loading the external file is not enough to have, it has to be written to the doc too for the JS to be run. **/
$( "body" ).append( html );
});
});
</script>
</body>
</html>
ajax-caller-pureJS-withSVG-notworking.html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>(Check out the console.)</p>
<script>
/** AJAX CALLER **/
/** When the document is ready, this self-executing function will be run. **/
(function() {
var ajax = new XMLHttpRequest();
ajax.open("POST", "ajax-callee.svg", true);
ajax.send();
/**
* Append the external SVG to this file.
* Gets appended okay…
* …but its JavaScript won't get executed.
*/
ajax.onload = function(e) {
/** Parse the response and append it **/
var parser = new DOMParser();
var ajaxdoc = parser.parseFromString( ajax.responseText, "image/svg+xml" );
document.getElementsByTagName('body')[0].appendChild( ajaxdoc.getElementsByTagName('svg')[0] );
}
})(); /* END (anonymous function) */
</script>
</body>
</html>
- jQuery 有哪些不同之处导致 JavaScript 被执行？
- 我该怎么做才能运行包含的 SVG JS？
- 有什么要注意的吗？
仅供引用，我正在尝试使用 SVG，但在我的测试中，当为 被调用者 使用 HTML 文件时，行为是相同的。
最佳答案
使用 DOMParser 解析的 HTML 规范脚本不会被执行 https://html.spec.whatwg.org/multipage/scripting.html#script-processing-noscript
The definition of scripting is disabled means that, amongst others, the following scripts will not execute: scripts in XMLHttpRequest's responseXML documents, scripts in DOMParser-created documents, scripts in documents created by XSLTProcessor's transformToDocument feature, and scripts that are first inserted by a script into a Document that was created using the createDocument() API. [XHR] [DOMPARSING] [XSLTP] [DOM]
看起来 jQuery 正在获取文本内容并创建一个新的脚本标记并将其附加到文档中。
http://code.jquery.com/jquery-3.3.1.js
DOMEval( node.textContent.replace( rcleanScript, "" ), doc, node );
function DOMEval( code, doc, node ) {
doc = doc || document;
var i,
script = doc.createElement( "script" );
script.text = code;
if ( node ) {
for ( i in preservedScriptAttributes ) {
if ( node[ i ] ) {
script[ i ] = node[ i ];
}
}
}
doc.head.appendChild( script ).parentNode.removeChild( script );
}
因此对于您的代码，您也可以这样做:
ajaxdoc.querySelectorAll("script").forEach((scriptElement) => {
let script = document.createElement("script");
script.text = scriptElement.textContent;
document.head.appendChild(script)
});
关于javascript - 如何在纯 JavaScript 中执行外部 HTML/SVG 文件中的 javascript？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50176018/