innerHTML插入JavaScript代码导致不运行的问题解决方案

于 2023-09-19 11:26:11 发布
阅读量812 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CodeWhizZ/article/details/133020171
js 专栏收录该内容
505 篇文章 ¥59.90 ¥99.00
订阅专栏
当使用innerHTML插入JavaScript代码时，浏览器不会执行这段代码，导致预期的脚本不运行。本文分析了该问题的原因，并提出了通过document.createElement('script')创建新脚本元素并附加到DOM中来解决的方法。

在开发网页应用程序时，我们经常会使用JavaScript来动态地修改HTML元素的内容。其中一种常见的方式是使用innerHTML属性将HTML标记和文本插入到元素中。然而，有时候我们可能会遇到innerHTML插入的JavaScript代码不运行的问题。本文将介绍这个问题的原因，并提供解决方案。

问题描述

首先，让我们看一下这个问题的具体表现。假设我们有一个包含一个按钮的HTML页面，当用户点击按钮时，我们希望动态地在页面上显示一段文本。为了实现这个功能，我们可以使用如下的JavaScript代码：

<!DOCTYPE html>
<html>
  <head
了解本专栏 订阅专栏 解锁全文
JavaScript技巧：解决innerHTML的一些问题
TechNovaX的博客
09-19 597
通过正确使用+=运算符来追加内容、使用createTextNode方法来处理特殊字符、以及注意innerHTML的安全风险，可以更好地利用innerHTML属性并避免常见的问题。当我们使用innerHTML属性时，有时候期望的是将新的HTML内容追加到元素中，而不是完全替换它。在使用innerHTML时，如果要插入包含特殊字符（如、&等）的内容，会导致解析错误或HTML代码不正确的问题。这样，新的段落将会被添加到元素的末尾，而不会替换掉原有的内容。问题2：innerHTML中的特殊字符转义。
关于在innerHTML中JS不执行的问题
03-28
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
让innerHTML中的script脚本执行起来
01-08
下面介绍怎么样让跑起来。 分析问题 既然只在文档加载中才被解析，那么我就得调用[removed]()方法来重新加载一次，但是这样的话原来页面的内容也会被覆盖掉了，所以不得不用IFRAME把[removed]()装载起来。 解决问题 var jsCode = 需要执行的JS代码 var jsIframe = document.createElement(iframe); jsIframe.style.display = none;//把jsIframe隐藏起来 document.body.appendChild(jsIframe); with(window
用innerHTML动态插入的script没有执行的问题
sinat_34626741的博客
07-08 5246
原因：浏览器会将通过innerHTML动态插入的当成普通文本，不会维护到DOM里面，所以会存在调用的时候找不到。 解决办法：首先嵌入后，通过DOM找到所有的script标签，然后一一创建script标签，并将script里面的内容重新赋值，将这个新的script节点追加到页面的head节点中，这样就可以调用里面的函数了。 ...
使用innerHTML插入js脚本不生效问题解决
Rex__404的博客
09-01 5718
1.起因： 在使用innerHTML向某个网页插入一个按钮button，和对应的js，发现js不生效 原始代码 var mylogin = document.createElement("button"); var myjs = document.createElement("script"); mylogin.innerHTML = '<button type="button" οnclick="tologin()">提交</button>' myjs.innerHTML
在innerHTML中执行Javascript代码
weixin_34194551的博客
07-31 664
以下是javascript的函数.var global_html_pool = [];var global_script_pool = [];var global_script_src_pool = [];var global_lock_pool = [];var innerhtml_lock = null;var document_buffer = ""; function set_inne...
解决ajax返回innerHTML中javascript不能运行问题
10-30
解决 Ajax 返回 innerHTML 中 ...解决 Ajax 返回 innerHTML 中 JavaScript 不能运行问题的关键是将 JavaScript 代码从 Ajax 返回的数据中提取出来，并将其添加到 `<head>` 中，让浏览器能够正确地解析和执行。
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
10-28
1. **破损的HTML标签**：当你尝试通过innerHTML添加的HTML代码中存在破损的标签，例如未闭合的`<li>`或`<div>`标签，IE浏览器可能无法正确解析，从而导致运行时错误。 2. **不合法的嵌套**：在某些情况下，IE对特定...
调用innerHTML之后onclick失效问题的解决方法
09-04
在给出的例子二中，开发者提供了一种变通的解决方案： 1. 不再直接通过`innerHTML`替换整个`<input>`元素，而是仅修改`<input>`的`value`属性。 2. 同时，更新`<span>`元素的`name`属性，以便根据业务逻辑区分不同...
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
10-24
通过上述的分析和解决方案，用户可以有效解决在IE8中使用js插件时，设置innerHTML导致的“未知运行时错误”。这些方法对提高JavaScript程序设计的兼容性和鲁棒性具有一定的帮助。同时，也是对编写跨浏览器代码的一种...
解决innerHTML时JS不生效
no..no,water colset!
12-12 7383
写了一个简单的函数..作用是解决innerHTML时JS不生效..基于网上某个类修改... 兼容ie6+..Firefox..其它未测! function set_innerHTML(el, htmlCode) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie') >= 0 &
html不自动运行js,解决innerHTML插入js不运行问题
weixin_40001245的博客
05-30 1925
最近改了一个老项目, 里面的页面请求大部分是通过ajax请求后来渲染的jsp页面, 然后再用innerHTML插入到当前页. 但是这就遇到了一个问题, jsp里引入的js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js的一些方法1. innerHTML介绍有两个功能, 一个是可以获取指定DOM的HTML元素, 另一个就是替换指定DOM的HTML元素2. innerH...
解决使用innerHTML时不能执行javascript的问题
捕风的汉子
03-12 1865
  一、使用innerHTML要注意的问题 2005-12-23 16:53 xlq 瞒天过海 ob.innerHTML="&lt;scrip"+"t&gt;&lt;/s"+"cript&gt;";       二、使用innerHTML要注意的问题 2007-02-12 17:07 qianfeng @wei 这样试试&lt;script defer="defe.
解决innerHTML包含的js代码不能被执行的问题
iteye_6254的博客
06-26 1358
   今天我写了个js弹出模态对话框，这个模态对话框能直接显示一个html或者是url的文本内容，因为加入我需要在对话框里面显示比较复杂的布局的话直接用字符串来做是很麻烦且很难修改的。各方面都比较完善了，但是今天，在我想用这个对话框加载一个页面的时候发现了新问题。 在我的要加载的页面里面有和用户的交互过程，这是用js实现的，我把这个页面加载到我的模态对话框里面，页面显示完全正确，可是在测...
html中js定义的方法无效,设置document.body.innerHTML时，javascript无效
weixin_35983438的博客
06-07 1286
重置innerHTML时，不会返回所有事件处理程序。当您创建全新的DOM元素时，它们将被清除。一个想法是在正文中有两个主div，一个是你的正常显示，另一个是你想要打印的。然后，您可以隐藏任何您不想显示的内容，如下所示：main screen content goes heregenerated print content goes here// hide main contentvar mainD...
通过innerHTML动态插入的script无法执行的解决方法
blogzhoubo的博客
11-05 4397
很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。 原因：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。 解决方法：...
html innerhtml 绑定事件无效,js中innerHTML的动态绑定的事件丢失
weixin_32127359的博客
06-03 3259
js事innerHTML事件丢失老前端人以前很容易遇到这种问题。渲染服务器端的数据，包装成自己的HTML，使用innerHTML或者.html()，异步的把它渲染上去。这时候会发现子元素写的一些事件不生效。image案发现场例如我们想在body中追加一个div,仔细看下面这个代码，您就会发现我在说什么了。按钮var ob = document.getElementById('btn');//doc...
innerHTML中script脚本不执行的问题
younldeace1的专栏
02-10 1921
有时候，我们会想到这样做。有一个div1，我希望向后台发送请求，然后这个请求会返回一个html页面代码，我希望把返回内容填充到div1里，但是html里所包含的script将不会执行。有一个好的办法就是不要用innerHTML，而是用jquery的load方法
解决innerHTML中script执行问题的代码策略
2. 解决IE忽略开头脚本的问题：为了使所有浏览器都能正常处理，可以在插入到innerHTML的内容前面添加非脚本的隐藏元素，如`<span style="display:none">hackie</span>`。这样可以防止IE忽略开头的script，同时确保不...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值