Динамическое добавление кода JavaScript на страницу

Этот вопрос связан с Frustrating innerHTML Issue.Динамическое добавление кода JavaScript на страницу

Поскольку этот вопрос был дубликатом другого вопроса, поэтому я ссылался на этот вопрос для решения. Я принял второй ответ в списке (37 голосов). Так что я использовал эту кодировку для динамического добавления javascript на свою страницу.

<html> 
<head><title>Javascript Using innerHTML</title> 
<script type="text/javascript"> 
    function setcode(code) { 
    document.write("<img src='empty.gif' onload='function msgbox(msg){alert(msg);};' />"); 
    } 
</script> 
</head> 
<body onload=""> 
<div id="hello"> 
    &nbsp; 
</div> 
<button onclick='setcode(document.getElementById("hello"))'>SET</button> 
<button onclick='msgbox("what up man?!");'>CHECK</button> 
</body> 
</html>

Теперь проблема в том, что при нажатии на кнопку SET, вся моя текущая страница удаляется из существования, и только код в document.write() остается. Я что-то делаю неправильно или что? Обратите внимание, что я хочу, чтобы добавить кодирование яваскрипта на мою страницу без удаления текущих визуальных объектов: S

источник

2015-11-04 Youstay Igo

Когда вы выполняете document.write, вы присваиваете ему значение, поэтому предыдущее значение стирается. Вам нужно будет добавить значение в контейнер. Вы можете использовать эту [статью] (http://stackoverflow.com/questions/17650776/add-remove-html-inside-div-using-javascript) в качестве справки – Rajesh

Вопрос заключается в том, что при нажатии на кнопку SET, вся моя текущая страница удаляется из существования и только код в документе document.write() остается

Это ожидаемое поведение функции document.write. Он перезапишет весь контент на странице.

Вам нужно вместо добавления содержимого на страницу, которую вы можете использовать следующее: document.body.innerHTML += "<img src..">

Ваш пример будет выглядеть следующим образом:

function setcode(code) { 
    document.body.innerHTML += "<img src='empty.gif' onload='function msgbox(msg){alert(msg);};' />"; 
}

источник

2015-11-04 11:44:42 Filype

Это выглядит многообещающим. Я должен попробовать это и посмотреть, работает ли он. –

OK Это не работает. Код ** ** добавляется к телу документа, но по причинам, хромым и неизвестным, часть javascript этого не выполняется _executed_. Поэтому, когда я нажимаю кнопку CHECK, не появляется окно сообщения. Однако, когда я редактирую код кнопки CHECK для предупреждения (document.body.innerHTML), он показывает, что строка была успешно добавлена кодом кнопки SET. Что я делаю не так? –

shouldn; t функция msgbox должна быть определена выше функции setcode, а не внутри атрибута onload изображения? – Filype

ОК, я нашел блестящее рабочее решение моей проблемы. Это второй ответ размещен на Can I add javascript dynamically to an existing script element

<html> 
<head><title>Javascript Using innerHTML</title> 
<script type="text/javascript"> 
    function setcode(code) { 
    var JS=document.createElement("script"); 
    JS.text="function msgbox(msg){alert(msg);}"; 
    document.body.appendChild(JS); 
    } 
</script> 
</head> 
<body onload=""> 
<div id="hello"> 
    &nbsp; 
</div> 
<button onclick='setcode(document.getElementById("hello"))'>SET</button> 
<button onclick='msgbox("hello");'>CHECK</button> 
</body> 
</html>

работает безотказно без каких-либо сбоев или проблем. Спасибо kennebec за ответ.

источник

2015-11-04 12:46:01

Динамическое добавление кода JavaScript на страницу

ответ

Смежные вопросы