Как jQuery может быть введен в кадр с помощью jQuery? [Дубликат]

Я пробовал этот один и отлично работает. Просто замените символ < на \x3C.

// With Variable
var code = "\x3Cscript>SomeCode\x3C/script>";
$("#someElement").append(code);

или

//Without Variable
$("#someElement").append("\x3Cscript>SomeCode\x3C/script>");

Здесь вы можете проверить код здесь .

Добавить скрипт в тело:

$(document).ready(function() {
    $("<script>", {  src : "bootstrap.min.js",  type : "text/javascript" }).appendTo("body");
});

Можно динамически загружать файл JavaScript с помощью функции jQuery getScript

$.getScript('http://www.whatever.com/shareprice/shareprice.js', function() {
  Display.sharePrice();
});

Теперь будет вызываться внешний скрипт, и если он не может быть загружен он будет грациозно деградировать.

Это работает:

$('body').append($("<script>alert('Hi!');<\/script>")[0]);

Кажется, что jQuery делает что-то умное со сценариями, поэтому вам нужно добавить элемент html, а не объект jQuery.

Это то, что я считаю лучшим решением. Google Analytics вводится таким образом.

var (function(){
    var p="https:" == document.location.protocol ? "https://" : "http://";
        d=document,
        g=d.createElement('script'),
        s=d.getElementsByTagName('script')[0];
        g.type='text/javascript';
        g.src=p+'url-to-your-script.js';
        s.parentNode.insertBefore(g,s); })();

Хорошая новость:

Он работает на 100%.

Просто добавьте что-то внутри тега скрипта, например alert('voila!');. Правильный вопрос, который вы, возможно, захотите спросить, возможно, «Почему я не увидел его в DOM?» .

Карл Сведберг сделал приятное объяснение комментарию посетителя в сайт API jQuery . Я не хочу повторять все его слова, вы можете прочитать здесь прямо здесь (мне было трудно перемещаться по комментариям там) .

Все методы вставки jQuery используют внутреннюю функцию domManip для очистки / обработки элементов до и после их вставки в DOM. Одна из функций, которую выполняет функция domManip, - это вытащить любые элементы скрипта, которые должны быть вставлены, и запускать их через «процедуру evalScript», а не вводить их остальной части фрагмента DOM. Он вставляет скрипты отдельно, оценивает их, а затем удаляет из DOM.

Я считаю, что одна из причин jQuery заключается в том, чтобы избежать ошибок «Разрешения на отказ», которые может возникать в Internet Explorer при вставке скриптов при определенных обстоятельствах. Он также избегает многократной вставки / оценки того же скрипта (который может потенциально вызвать проблемы), если он находится внутри содержащего элемента, который вы вставляете, а затем перемещаете DOM.

Следующее, я расскажу, что это плохие новости, используя функцию .append(), чтобы добавить скрипт.

---

И The Bad News is ..

Вы не можете отлаживать свой код.

Я не шучу, даже если вы добавили ключевое слово debugger; между строкой, которую вы хотите установить в качестве точки останова , вы получите только стек вызовов объекта, не увидев точку останова на исходном коде, (не говоря уже о том, что это ключевое слово работает только в браузере webkit, все остальные основные браузеры, похоже, пропустили это ключевое слово) .

Если вы полностью понимаете, что делает ваш код, это будет незначительным недостатком. Но если вы этого не сделаете, вы добавите ключевое слово debugger; по всему месту, чтобы узнать, что не так с вашим (или моим) кодом. Во всяком случае, есть альтернатива, не забывайте, что javascript может изначально манипулировать HTML DOM.

---

Обходной путь.

Используйте javascript (не jQuery) для управления HTML DOM

Если вы не хотите потерять возможности отладки, вы можете использовать javascript для собственных HTML DOM-манипуляций. Рассмотрим этот пример:

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/your/javascript.js";    // use this for linked script
script.text  = "alert('voila!');"               // use this for inline script
document.body.appendChild(script);

Там, как и в старые времена, это не так. И не забудьте очистить вещи, будь то в DOM или в памяти для всего объекта, на который ссылается и больше не требуется, чтобы предотвратить утечку памяти. Вы можете рассмотреть этот код для очистки вещей:

document.body.removechild(document.body.lastChild);
delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.

Недостатком этого обходного пути является то, что вы можете случайно добавить дублирующий скрипт, и это плохо. Отсюда вы можете слегка подражать функции .append(), добавив проверку объекта перед добавлением и удалив скрипт из DOM сразу после его добавления. Рассмотрим этот пример:

function AddScript(url, object){
    if (object != null){
        // add script
        var script   = document.createElement("script");
        script.type  = "text/javascript";
        script.src   = "path/to/your/javascript.js";
        document.body.appendChild(script);

        // remove from the dom
        document.body.removeChild(document.body.lastChild);
        return true;
    } else {
        return false;
    };
};

function DeleteObject(UnusedReferencedObjects) {
    delete UnusedReferencedObjects;
}

Таким образом, вы можете добавить скрипт с возможностью отладки, избегая при этом двукратности сценария. Это всего лишь прототип, вы можете расширить его, как хотите. Я использовал этот подход и вполне доволен этим. Конечно, я никогда не буду использовать jquery .append(), чтобы добавить скрипт.

Happy Coding, Hendra Uzia.

Попробуйте это может быть полезно:

var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","scriptAnalytics.js");
document.getElementsByTagName("head")[0].appendChild(fileref);

Что значит «не работает»?

jQuery обнаруживает, что вы пытаетесь создать элемент SCRIPT и будете автоматически запускать содержимое элемента в глобальном контексте. Вы говорите мне, что это не работает для вас? -

$('#someElement').append('<script>alert("WORKING");</script>');

Редактирование: если вы не видите элемент SCRIPT в DOM (например, в Firebug) после запуска команды, так как jQuery, как я уже сказал, будет запускать код, а затем удалит элемент SCRIPT - я считаю, что элементы SCRIPT всегда присоединяются к телу ... но в любом случае - размещение не имеет никакого отношения к выполнению кода в этой ситуации.

Вам не нужен jQuery, чтобы создать [DOM Element] DOM Element . Это можно сделать с помощью ванильного ES6 следующим образом:

const script = "console.log('Did it work?')"
new Promise((resolve, reject) => {
  (function(i,s,o,g,r,a,m){a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.innerText=g;a.onload=r;m.parentNode.insertBefore(a,m)})(window,document,'script',script, resolve())
}).then(() => console.log('Sure did!'))

Его не нужно обертывать в Promise, но это позволяет вам разрешить обещание при загрузке скрипта, помогая предотвратить условия гонки для длительных сценариев.

Я хочу сделать то же самое, но добавить тег скрипта в другой фрейм!

var url = 'library.js'; 
var script = window.parent.frames[1].document.createElement('script' ); 
script.type = 'text/javascript'; 
script.src = url;
$('head',window.parent.frames[1].document).append(script);

Выполняется ваш скрипт, вы просто не можете использовать document.write из него. Используйте предупреждение, чтобы проверить его и не использовать document.write. Заявления вашего js-файла с document.write не будут выполнены, а остальная часть функции будет выполнена.

Я написал пакет npm, который позволяет вам взять строку HTML, включая теги скриптов, и добавить ее в контейнер при выполнении скриптов

Пример:

import appendHtml from 'appendhtml';

const html = '<p>Hello</p><script src="some_js_file.js"></script>'; 
const container = document.getElementById('some-div');

await appendHtml(html, container);

// appendHtml returns a Promise, some_js_file.js is now loaded and executed (note the await)

Найдите его здесь: https://www.npmjs.com/package/appendhtml

Другой способ сделать это, если вы хотите добавить код, - это использовать метод document.createElement, но затем использовать .innerHTML вместо .src.

var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.innerHTML = 'alert("Hey there... you just appended this script to the body");';
$("body").append( script );

Добавление sourceURL в файл сценария помогло, как упоминалось на этой странице: https://blog.getfirebug.com/2009/08/11/give-your-eval-a-name-with-sourceurl/

1. В файле сценария добавьте оператор с sourceURL как «// @ sourceURL = foo.js»
2. Загрузите скрипт с помощью jQuery $ .getScript (), и скрипт будет доступен на вкладке «sources» в инструментах chrome dev

<script>
    ...
    ...jQuery("<script></script>")...
    ...
</script>

</script> внутри строкового литерала завершает весь скрипт, чтобы избежать использования "</scr" + "ipt>".

Просто создайте элемент, проанализируя его с помощью jQuery.

<div id="someElement"></div>
<script>
    var code = "<script>alert(123);<\/script>";
    $("#someElement").append($(code));
</script>

Рабочий пример: https://plnkr.co/edit/V2FE28Q2eBrJoJ6PUEBz

Можно попробовать это

var code = "<script></" + "script>";
$("#someElement").append(code);

Единственная причина, по которой вы не можете сделать "<script></script>", - это то, что строка не разрешена внутри javascript, потому что слой DOM не может разобрать, что такое js, и что HTML.