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

于 2023-09-19 11:26:11 发布
阅读量453 收藏
点赞数
文章标签： javascript 开发语言 ecmascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CodeWhizZ/article/details/133020171
版权
js 专栏收录该内容
505 篇文章 8 订阅 ¥59.90 ¥99.00
订阅专栏

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

问题描述

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

<!DOCTYPE html>
<html>
  <head>
    <t
了解本专栏 订阅专栏 解锁全文
技术驱动者
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
通过innerHTML动态插入的script无法执行的解决方法
blogzhoubo的博客
11-05 3966
很多时候，需要通过innerHTML动态插入javascript代码到指定的div中，或者通过ajax请求回来的内容里面包含javascript代码，然后把该代码插入指定的div中，但是插入后的script却无法执行。 原因：直接通过innerHTML动态嵌入的script，浏览器会当做普通的文本，不会当作SCRIPT节点维护到DOM里面，所以调用的时候找不到。 解决方法：...
html不自动运行js,解决innerHTML插入js不运行问题
weixin_40001245的博客
05-30 1573
最近改了一个老项目, 里面的页面请求大部分是通过ajax请求后来渲染的jsp页面, 然后再用innerHTML插入到当前页. 但是这就遇到了一个问题, jsp里引入的js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js的一些方法1. innerHTML介绍有两个功能, 一个是可以获取指定DOM的HTML元素, 另一个就是替换指定DOM的HTML元素2. innerH...
解决ajax返回innerHTML中javascript不能运行问题
10-30
解决ajax返回innerHTML中javascript不能运行问题
用innerHTML动态插入的script没有执行的问题
sinat_34626741的博客
07-08 4285
原因：浏览器会将通过innerHTML动态插入的当成普通文本，不会维护到DOM里面，所以会存在调用的时候找不到。 解决办法：首先嵌入后，通过DOM找到所有的script标签，然后一一创建script标签，并将script里面的内容重新赋值，将这个新的script节点追加到页面的head节点中，这样就可以调用里面的函数了。 ...
在HTML页面加载完毕后运行某个js.
卡布洛技术专栏
05-07 5363
js方法： window.onload=function(){    var userName="xiaoming";    alert(userName); } 以下为jQuery方法，需要引用jQuery文件。 $(document).ready(function(){    var userName="xiaoming";    alert
使用innerHTML插入js脚本不生效问题解决
Rex__404的博客
09-01 4706
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包含的js代码不能被执行的问题
iteye_6254的博客
06-26 1116
   今天我写了个js弹出模态对话框，这个模态对话框能直接显示一个html或者是url的文本内容，因为加入我需要在对话框里面显示比较复杂的布局的话直接用字符串来做是很麻烦且很难修改的。各方面都比较完善了，但是今天，在我想用这个对话框加载一个页面的时候发现了新问题。 在我的要加载的页面里面有和用户的交互过程，这是用js实现的，我把这个页面加载到我的模态对话框里面，页面显示完全正确，可是在测...
在innerHTML中执行Javascript代码
weixin_34194551的博客
07-31 586
以下是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...
关于在innerHTML中JS不执行的问题
03-28
NULL 博文链接：https://wuzhengxuan.iteye.com/blog/1263906
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
01-19
[removed] ”trone”> </tr> 在IE中，有时候会出现”未知的运行时错误(unknown runtime error)”,而在firefox里不会。 这主要是IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的...
关于innerHTML后丢失动态绑定的EVENT问题解决方法
01-19
用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如: html: 代码如下: <body>.../body>... 解决方法： 把onclick绑定到父元素，利用冒泡原理，判断当前元素是否为d1,若
让插入到 innerHTML 中的 script 跑起来的实现代码
01-19
如果你读过 MSDN，你会发现并非所有插入到 innerHTML 中的脚本都不能执行，如果这段脚本的 script 标签中包含了 defer 属性，IE 会正确的执行这些脚本程序。但不幸的是，Moziila/Firefox 和 Opera 可不吃这一套，...
js innerHTML 的一些问题的解决方法
12-12
然而，你需要知道 innerHTML 有一些... 还有几个其他次要的缺点，也值得一提的： 1、你不能得到刚刚创建的元素的引用，需要你手动添加代码才能取得那些引用（使用 DOM APIs）。 2、你不能在所有浏览器的所有 HT
html嵌入js代码显示而不执行的
了缺的专栏
03-11 9614
昨天跟朋友聊了点关于web安全方面的问题，我对这个摄入不深。提到关于html嵌入js不是让他执行而是显示。第一反应就是html转移，用过把<script>alert(1)<script>这一块代码，存入数据库里面，当被读取然后输出到浏览器的时候，html肯定会被执行。一般写代码的时候，insert的时候，肯定会随手会转义一下，知道这是为了安全考虑。久而久之也不动脑筋了忽略了一些东西吧。1.对<scr
动态插入菜单栏，js失效的问题
qq_37342484的博客
12-18 385
最进在练习做一个权限管理系统，需要根据用户的权限加载菜单栏。用的是layui前端框架，后端模板也是基于layui，layui总体还是好用的，虽然有些地方还不够完善。在使用过程中，我主要遇到两点问题，由于对前端不是很熟，花了一天时间才解决。 1、动态插入dom后，子菜单无法显示 根据权限获得菜单栏的数据，并以此来动态插入DOM，那么免不了要构造DOM节点。开始时，我是一个节点一个节点的构造，比如...
前端html引入的js文件无效,手把手教你如何在HTML中引入外部JS文件_WEB前端开发...
weixin_35863455的博客
06-03 814
5种你一定不知道的HTML空格表示方法_WEB前端开发HTML提供了5种空格实体(spaceentity)，它们拥有不同的宽度，非断行空格是常规空格的宽度，可运行于所有主流浏览器。其他几种空格在不同浏览器中宽度各异。在学习前端的时候，小伙伴们一定对于在HTML中如何引入外部JS文件感到困惑，下面小编教你HTML引入外部JS文件的方法。在引入外部JS文件的情况下，不能在之间插入代码，插入的代码不执行...
JS动态插入HTML后不能执行后续JQUERY操作
weixin_34015336的博客
04-13 383
通过js追加的html 发现 不能点击 执行函数  普通绑定事件：$('.btn1').click(function(){}绑定 事件委托  解决方法： $("body").delegate(".class","click",function(){}); on绑定事件：$(document).on('click','.btn2',function(){}绑定  文章来...
js innerhtml后不显示_JS效果日记（二）
weixin_39736007的博客
11-28 474
JS效果日记（二）*图片切换效果<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="btn">隐藏</button> ...
innerHTML 变更导致焦点丢失如何解决？
最新发布
09-08
### 回答1： 你可以使用 JavaScript 的 focus() 方法来重新设置焦点。例如，要将焦点放回到某个元素，可以使用：document.getElementById('inputBox').focus()。 ### 回答2： innerHTML 变更导致焦点丢失的问题可以通过以下方法来解决： 1. 缓存焦点位置：在进行 innerHTML 变更之前，先使用 JavaScript 将当前的焦点位置保存起来。可以通过 document.activeElement 属性来获取当前的焦点元素。保存焦点之后再进行 innerHTML 的变更。 2. 使用节点操作：使用 DOM 的节点操作来动态修改网页内容，而不是直接使用 innerHTML。例如，可以使用 createElement、createTextNode、appendChild 等方法来创建和插入新的节点。 3. 使用 insertAdjacentHTML 方法：insertAdjacentHTML 方法是一种不会影响焦点位置的修改 HTML 内容的方式。它可以在指定的位置插入新的 HTML 代码，而不会影响到已有的 HTML 结构和焦点位置。 4. 设置焦点位置：在进行 innerHTML 变更之后，可以使用之前保存的焦点位置信息，通过 JavaScript 设置焦点到对应的元素上来恢复焦点。 5. 使用 contentEditable 属性：将需要进行 innerHTML 变更的元素的 contentEditable 属性设置为 true，使其可以直接编辑。这样，在变更内容时，焦点不会丢失。 综上所述，我们可以通过缓存焦点位置、使用节点操作、使用 insertAdjacentHTML 方法、设置焦点位置以及使用 contentEditable 属性等方法来解决 innerHTML 变更导致焦点丢失的问题。选择合适的方法取决于具体的需求和情况。 ### 回答3： 当我们使用innerHTML来修改元素的内容时，可能会导致焦点丢失的问题。这是因为innerHTML会重新渲染DOM，并且会导致原来的元素被销毁然后重新创建。 要解决这个问题，可以尝试以下方法： 1. 使用innerHTML之前，先保存当前元素的焦点状态。例如，可以使用document.activeElement来获取当前获得焦点的元素，然后在innerHTML操作完成后，使用element.focus()方法将焦点重新还给相应的元素。 2. 使用insertAdjacentHTML方法代替innerHTML。insertAdjacentHTML可以在指定的位置插入HTML代码，而不会影响原有的DOM结构。这样可以避免重新渲染DOM和焦点丢失的问题。 3. 改变操作顺序。先将需要修改的内容保存到一个变量中，然后再将innerHTML置空，最后使用变量中的内容重新填充元素。这样可以减少重新渲染的次数，减少焦点丢失的可能性。 4. 尽量避免使用innerHTML来修改元素内容，而是使用其他API来实现相同的效果。例如，可以使用createElement和appendChild方法来动态创建和插入新的元素，或者使用textNode来修改元素的文本内容，而不会影响原有的DOM结构和焦点状态。 综上所述，通过保存焦点状态、使用insertAdjacentHTML、改变操作顺序和避免使用innerHTML等方法，我们可以有效地解决innerHTML变更导致焦点丢失的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值