Динамически добавляемый скрипт не будет выполняться
Я динамически добавляю скрипт GitHub gist. Если я добавил его в html до загрузки страницы, скрипт будет выполнен. Но если я попытаюсь добавить его на страницу после загрузки, он добавит скрипт на страницу, но не выполнит его.
вот как я добавляю его на страницу
HTML-код
<div id="results"></div>
в JavaScript
$('#results').click(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
document.getElementById('results').appendChild(script);
console.log('script added');
});
вот живой пример
6 ответов
Итак, лучший вариант, который я вижу, - это переопределить (даже если только временно во время загрузки скрипта) document.write. Это своего рода работа, но так как вы не контролируете входящий код, я думаю, что это может быть лучшее, что у вас есть. Вы также не должны использовать document.write в любое время после загрузки страницы, но на всякий случай, я бы, возможно, прочесал ваш код.
здесь скрипка С рабочим раствором. Если вы хотите вернуться document.write после загрузки скрипта вы можете всегда проверяйте, если script.complete is true, в противном случае, слушать onload событие, которое должно позволить вам изменить document.write обратно. Я слишком ленив, чтобы в нем код в скрипку, но это будет код:
script.src = "...";
document.getElementById("results").appendChild(script);
if(script.complete) document.write = document._write;
else script.load(function() {
// Goes to the end of the run queue so that the script
// is guaranteed to run before this code
setTimeout(function(){document.write = document._write;},0);
});
он выполняется, но он не будет работать, так как он использует document.write, который можно использовать только синхронно. Включить асинхронные document.write и измените свой скрипт следующим образом:
$('#results').click(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://gist.github.com/1265374.js?file=GetGists.js";
document.write.to = {filename: script.src};
document.getElementById('results').appendChild(script);
console.log('script added');
});
Итак, в качестве альтернативы, я на самом деле просто наткнулся на библиотеку, которая, похоже, справится с этим для вас. Проверьте инжектор.js, и это должно сработать для вас.
ваш скрипт , вы просто не можете использовать document.пиши оттуда. Используйте предупреждение, чтобы проверить его и избежать использования документа.писать. Операторы вашего JS-файла с документом.write не будет выполняться, а остальная часть функции будет выполнена.
я смог выполнить это после нескольких часов попыток, включая все другие ответы здесь. Мой скрипт выглядит так:
<script src="https://somedomain.com/some.js"></scipt>
таким образом, eval() не был возможен.
я использовал jQuery.getScript () в конце, который извлекает файл js и выполняет его:
var $scriptTag = $('#myElement script');
var scriptSrc = $scriptTag.attr('src');
$.getScript(scriptSrc);