gpt4 book ai didi

javascript - 如何在纯 JavaScript 中执行外部 HTML/SVG 文件中的 javascript?

转载 作者:搜寻专家 更新时间:2023-10-31 08:13:29 25 4
gpt4 key购买 nike

我有一个 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com