У меня есть сценарий, который вставляет некоторый контент в элемент, используя innerHTML
.
Например, контент может быть:
<script type="text/javascript">alert('test');</script>
<strong>test</strong>
Проблема в том, что код внутри <script>
тега не выполняется. Я немного погуглил, но очевидных решений не было. Если я вставлял контент с помощью jQuery, $(element).append(content);
части скрипта получали eval
до того, как были введены в DOM.
У кого-нибудь есть фрагмент кода, который выполняет все <script>
элементы? Код jQuery был немного сложным, поэтому я не мог понять, как это было сделано.
редактировать :
Заглянув в код jQuery, мне удалось выяснить, как это делает jQuery, в результате чего получился следующий код:
Demo:
<div id="element"></div>
<script type="text/javascript">
function insertAndExecute(id, text)
{
domelement = document.getElementById(id);
domelement.innerHTML = text;
var scripts = [];
ret = domelement.childNodes;
for ( var i = 0; ret[i]; i++ ) {
if ( scripts && nodeName( ret[i], "script" ) && (!ret[i].type || ret[i].type.toLowerCase() === "text/javascript") ) {
scripts.push( ret[i].parentNode ? ret[i].parentNode.removeChild( ret[i] ) : ret[i] );
}
}
for(script in scripts)
{
evalScript(scripts[script]);
}
}
function nodeName( elem, name ) {
return elem.nodeName && elem.nodeName.toUpperCase() === name.toUpperCase();
}
function evalScript( elem ) {
data = ( elem.text || elem.textContent || elem.innerHTML || "" );
var head = document.getElementsByTagName("head")[0] || document.documentElement,
script = document.createElement("script");
script.type = "text/javascript";
script.appendChild( document.createTextNode( data ) );
head.insertBefore( script, head.firstChild );
head.removeChild( script );
if ( elem.parentNode ) {
elem.parentNode.removeChild( elem );
}
}
insertAndExecute("element", "<scri"+"pt type='text/javascript'>document.write('This text should appear as well.')</scr"+"ipt><strong>this text should also be inserted.</strong>");
</script>
javascript
dom
eval
innerhtml
фида
источник
источник
function testFunction(){ alert('test'); }
в код, вставленный в innerHTML, а затем пытаюсь ее вызвать, это говорит о том, что функция не определена.Ответы:
Сценарий OP не работает в IE 7. С помощью SO вот сценарий, который выполняет:
источник
$(parent).html(code)
- см. Мой ответ ниже.if (nodeName(child, "script" ) && (!child.type || child.type.toLowerCase() === "text/javascript")) { scripts.push(child); } else { exec_body_scripts(child); }
elem.src
и условной установкиsrc
свойства созданного элемента сценария вместо установки его текстового содержимого.eval
трюк вместо создания<script>
элемента и вставки его в<head>
? Оба они выполняют код JS, не открывая текущее закрытие.@phidah ... Вот очень интересное решение вашей проблемы: http://24ways.org/2005/have-your-dom-and-script-it-too
Вместо этого это будет выглядеть так:
<img src="empty.gif" onload="alert('test');this.parentNode.removeChild(this);" />
источник
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" onload="alert('test');">
если хотите предотвратить бесполезный HTTP-запрос.style="display:none;
), чтобы скрыть значок сломанного изображения<style>
лучше<img>
, потому что он не делает запрос сетиВот более короткий и эффективный сценарий, который также работает для сценариев со
src
свойством:Примечание: хотя
eval
при неправильном использовании может возникнуть уязвимость в системе безопасности, это намного быстрее, чем создание тега сценария на лету.источник
eval
был разработан, чтобы навредить пользователям. Выполнение любого динамического сценария представляет собой риск, и именно поэтому CSP называет это'unsafe-eval'
так. Вы также наносите ущерб безопасности своих сайтов, если используете его в библиотеке, поскольку они не могут его отключить.src
свойством будут загружаться асинхронно и выполняться по мере поступления. Порядок не сохраняется. Встроенные скрипты также будут выполняться вне очереди, синхронно перед асинхронными.Вы должны использовать не свойство innerHTML, а метод appendChild узла: узел в дереве документа [HTML DOM]. Таким образом, вы сможете позже вызвать свой внедренный код.
Убедитесь, что вы понимаете, что
node.innerHTML
это не то же самое, чтоnode.appendChild
. Вы можете потратить некоторое время на Javascript Client Reference для получения более подробной информации и DOM. Надеюсь, следующее поможет ...Образцы инъекционных работ:
С уважением,
источник
try this, look how clever I am
ответы. Заслуживает УФ-излучения, получил мое.var _in = document.getElementById(inject);
, Думаю.Упрощенная версия ES6 ответа @joshcomley с примером.
Без JQuery, без библиотеки, без eval, без изменения DOM, только чистый Javascript.
http://plnkr.co/edit/MMegiu?p=preview
использование
источник
setInnerHtml
неsetInnerHTML
setInnerHTML
но она вызываетсяsetInnerHtml
изнутриrunB
функции. Следовательно, пример не работаетПопробуйте этот фрагмент:
источник
Он работает в Chrome в моем проекте
источник
Решение без использования eval:
По сути, это клонирует тег сценария, а затем заменяет заблокированный тег сценария новым сгенерированным, что обеспечивает выполнение.
источник
scriptNode.innerHTML = code
не работал для IE. Единственное, что нужно сделать, это заменить,scriptNode.text = code
и он отлично работаетисточник
Легче использовать jquery
$(parent).html(code)
вместоparent.innerHTML = code
:Это также работает со скриптами, которые используют,
document.write
и скриптами, загружаемыми черезsrc
атрибут. К сожалению, даже это не работает со скриптами Google AdSense.источник
Просто сделать:
источник
Вы можете взглянуть на этот пост . Код может выглядеть так:
источник
Благодаря сценарию Ларри, который отлично работал в IE10, я использовал вот что:
источник
От Ларри. Я сделал рекурсивный поиск по всему блоку и дочерним узлам.
Теперь сценарий также будет вызывать внешние сценарии, указанные с параметром src. Скрипты добавляются к заголовку, а не вставляются и размещаются в том порядке, в котором они были найдены. Так что специально сохраняются скрипты заказа. И каждый сценарий выполняется синхронно, подобно тому, как браузер обрабатывает начальную загрузку DOM. Итак, если у вас есть блок сценария, который вызывает jQuery из CDN, а следующий узел сценария использует jQuery ... Нет проблем! О, и я пометил добавленные сценарии сериализованным идентификатором, основанным на том, что вы установили в параметре тега, чтобы вы могли найти, что было добавлено этим сценарием.
источник
Попробуй, у меня это работает в Chrome, Safari и Firefox:
Следует отметить, что следующий сценарий, вложенный в div, НЕ запускается:
Для запуска скрипта он должен быть создан как узел, а затем добавлен как дочерний. Вы даже можете добавить скрипт внутри ранее введенного div, и он запустится (я уже сталкивался с этим раньше, пытаясь заставить работать код рекламного сервера):
источник
Расширяя ответ Ламбдера
Вы можете использовать образ base64 для создания и загрузки вашего скрипта
Или, если у вас есть,
Iframe
вы можете использовать его вместоисточник
Мне нужно было что-то подобное, но мне нужно, чтобы сценарий оставался или воссоздавался в том же месте, что и исходный сценарий, поскольку мой сценарий нацелен на расположение тега сценария в DOM для создания / целевых элементов. Я также сделал сценарий рекурсивным, чтобы убедиться, что он также работает, если он находится более чем на один уровень ниже.
ПРИМЕЧАНИЕ. Я использую
const
здесь, если у вас более старый браузер, просто используйтеvar
.источник
Сделал эту новую вспомогательную функцию на TypeScript, может, кто-то это оценит. Если вы удалите объявление типа из параметра скрипта, это будет просто JS.
источник
Попробуйте функцию eval ().
Это реальный пример из проекта, который я разрабатываю. Благодаря этому сообщению
источник
Вот мое решение в недавнем проекте.
источник