У меня есть файл SVG, который определяет некоторые из его стилей и <defs> динамически с JavaScript.
Я использую указанный SVG-файл внутри HTML-файла.
- Если я сам открою файл SVG, его JavaScript будет выполнен.
- Если, используя jQuery, я включаю файл SVG в файл HTML через AJAX (добавляя SVG к документу HTML), то JavaScript SVG также выполняется.
- Однако с использованием чистого JavaScript: если я включаю файл SVG в файл HTML через AJAX (добавляя SVG к документу HTML) , тогда JavaScript 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>
- Что jQuery делает по-другому, что приводит к выполнению JavaScript?
- Что я могу сделать, чтобы запустить включенный SVG JS?
- Что-нибудь остерегаться?
К вашему сведению, я пытаюсь использовать SVG, но в моих тестах поведение было таким же при использовании файлов HTML для callee .