时间戳

首页 > 解决方案 > 如何在纯 JavaScript 的外部 HTML/SVG 文件中执行 javascript？

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

问题描述

我有一个 SVG 文件，它定义了它的一些样式并<defs>使用 JavaScript 动态地定义。

我在 HTML 文件中使用所述 SVG 文件。

我正在尝试理解并修复这种行为。

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

仅供参考，我正在尝试使用 SVG，但在我的测试中，当为被调用者使用 HTML 文件时，行为是相同的。

标签： javascriptjqueryhtmlajaxsvg

解决方案

从使用 DOMParser 解析的 HTML 规范脚本不会执行 https://html.spec.whatwg.org/multipage/scripting.html#script-processing-noscript

禁用脚本定义意味着以下脚本将不会执行：XMLHttpRequest 的 responseXML 文档中的脚本、DOMParser 创建的文档中的脚本、由 XSLTProcessor 的 transformToDocument 功能创建的文档中的脚本以及首先由脚本插入的脚本到使用 createDocument() API 创建的 Document 中。[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)
});

推荐阅读