解决ajax返回innerHTML中javascript不能运行问题

最新推荐文章于 2022-08-18 17:58:59 发布
最新推荐文章于 2022-08-18 17:58:59 发布
阅读量9.6k 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript ajax 正则表达式 div function 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehell/article/details/2232326
版权

 在实际应用的过程中，我们经常会遇到使用ajax返回某一个网页的内容到模版页面的某一个<div>标签中显示的操作。如果返回的值仅仅是文本类数据不会影响模版页面的功能，但是如果返回的数据包括javascript，那么直接innerHTML到模版页的这段脚本是不会被运行的。原因在于浏览器只在显示模版时才解析javascript，而使用ajax返回的js是被后期倒入的并没有被解析，所以调用的时候找不到对应的function()。

想要解决这个问题，最基本的方法就是需要让浏览器可以同时解析<div>标签中的js。如果单适用IE浏览器，最简单的方式就是在<div>中的<script>标签中添加属性defer，它可以通知IE该脚本需要异步解析。但是令人头痛的是Firfox的标准总是和IE有着各种各样的不同，由于FF不支持defer所以使得开发者不得不另辟蹊径来解决这个问题。

实际上，我们可以在ajax返回数据并innerHTML到模版之前先把<div>中的javascript取出并写到模版页面的<head>中让浏览器解析。这样就相当于在打开模版页面的同时加载了所有<div>标签需要的javascript。奇怪的是这些脚本必须添加在<head>标签中FF才能有效，如果有人知道原因希望可以指点偶一下。

实现方法举例：

function  get_div_content(divid) {
        
        var xmlHttp = GetXmlHttpObject();
        var url = "http://" + document.location.host + "/divpage.jsp?id="+divid+"&random="+Math.random();
        var div_content_id = "drag_content_"+divid;
        var xmlHttp=GetXmlHttpObject();
            if (xmlHttp==null)
            {
                alert ("AJAX初期化失敗!");
                return;
            }
            xmlHttp.onreadystatechange=function(){
               
                if(xmlHttp.readyState < 4){
                    document.getElementById(div_content_id).innerHTML="Loading...";
                }    
                if(xmlHttp.readyState==4){
                    //用正则表达式匹配ajax返回的text中是否有onload,如果存在则取出内容。 
                      var reg_onload = /<body onLoad="([^<]*)">/;
                      var match_onload=xmlHttp.responseText.match(reg_onload);            
                    //用正则表达式匹配ajax返回的text中是否有<script>，如果存在则取出标签内部的内容。       
                    var reg = /<script[^>]*>([sS]*)</script>/;
                    var match=xmlHttp.responseText.match(reg);
                    var MyScript="";
                    if(match!=null){
                        MyScript=match[1];
                        var script=document.createElement("script");//在模版页创建新的<script>标签
                        script.text=MyScript;//给新的script标签赋值
                        document.getElementsByTagName("head")[0].appendChild(script);//把该标签加入<head>
                        }
                    var Html=xmlHttp.responseText.replace(reg,"");//将剩下的text祛除<script>部分，插入模版页
                    document.getElementById(div_content_id).innerHTML=Html;
                       if(match_onload!=null){
                          eval(match_onload[1]);//如果存在onload方法，则调用；
                      }
                   }
            }
            xmlHttp.open("GET",url,true);
            xmlHttp.send(null);
    }

test.html

< table >
     < script  type ="text/javascript"  defer ="defer" >
     function test(){alert('测试下，用ajax的话，这段代码也会执行的！');}
     </ script >
     < tbody >
        < tr >
           < td >< input  onclick ="test()"  value ="click me"  type ="button" ></ td >
        </ tr >
      </ tbody >
</ table >
yehell
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
用AJAX返回HTML片段中的JavaScript脚本
12-03
这是AJAX开发中很常见的问题，如果你不是一直在用JavaScript框架做开发，相信你早就发现这个问题了。本文分析了两个解决办法，其中一个是讲解jQuery框架的实现。 一、 问题描述 下面举个简单的例子，演示问题所在。...
解决ajax返回innerHTML中javascript不能运行的问题
yymycabbage的专栏
08-11 949
在做 ajax 编程时，我们常常需要将 xmlhttp 获取到的页面内容通过 innerHTML 来赋给某个容器（比如 div、span 或者 td 等），但是这里存在一个问题，就是我们将要赋给 innerHTML 的页面内容如果包含有脚本程序，这些脚本程序不管是外部脚本，还
Ajax中动态执行返回到innerHTML中的js
aiizumt4059的博客
08-20 167
******************************************************************** * 版权声明 * * 本文以Creative Commons的发布,请严格遵循该授权协议。 * 本文首发于博客园, 此声明为本文章中不可或缺的...
让Ajax返回的innerHTML中的Javascript代码运行起来
LAMP随记
02-03 573
       Ajax返回的字符串，放入某个div的innerHTML中，然后再对此div对象调用getElementsByTagName("SCRIPT")方法，获取一个js的代码数组，然后将此数组的各元素，放入eval()逐个执行即可！ 
ajax innerHTML 拼接js 不执行，呈现解决方法
jcoiwenwfkowe的博客
09-05 150
ajax innerHTML 拼接js 不执行，呈现解决方法
使用ajax加载的页面中包含的javascript的解决方法
01-19
1、【使用iframe】 在需要加载的页面中添加一个iframe，如下 代码如下: <iframe style=”display:none” onload=”[removed] close_ticket_onload()”></iframe> onload中添加你所要调用的函数，如果...
JavaScript程序设计-Ajax技术.pdf
11-02
JavaScript程序设计中，Ajax技术是不可或缺的一部分，它使得网页能够异步地与服务器通信，无需刷新整个页面即可更新数据。Ajax全称为"Asynchronous JavaScript and XML"，虽然名称中包含XML，但实际应用中，数据格式...
解决innerHTML时JS不生效
no..no,water colset!
12-12 7151
写了一个简单的函数..作用是解决innerHTML时JS不生效..基于网上某个类修改... 兼容ie6+..Firefox..其它未测! function set_innerHTML(el, htmlCode) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie') >= 0 &
jquery用ajax请求，返回带脚本的html附加到页面，返回的脚本无法执行
qq824756152的博客
08-18 375
jQuery.parseHTML()不会运行解析的HTML中的脚本，除非你明确将参数keepScripts指定为true。不过，大多数环境仍然可以间接地执行脚本，例如：通过属性。出于未来的兼容性考虑，当参数keepScripts被省略或为false时，调用者应该不依赖任何运行脚 本内容的能力。原因是 $(xx).html() 不解释脚本，要用 parseHTML函数指定要执行脚本的参数或自己触发脚本执行。在写jquery经常会返回带脚本的内容，但里面的脚本会有莫名奇妙的问题，例如像下面的。...
innerHTML中的js运行
lisen1987的专栏
11-29 778
innerHTML后js一直无法运行，困扰了我好久 最近又要用到这个，还要在innerHTML后去执行里面的js，网上搜到各种方法，都不行 后来想到ExtJs中，有个loadScript参数，去看了下源码，发现每个el中有个update方法，正是我想要的，嘿嘿 ，问题解决 update : function(html, loadScripts, callback) { if (
ajax获取的数据中包含html代码,执行ajax返回数据中包含的script脚本代码
weixin_34028581的博客
06-04 519
ajax虽然很方便，提升了我们的交互体验，但是它也有可恨之处，就是ajax请求得到的数据中如果包含脚本代码，比如说请求得到的是一块html内容，我们把这块html内容插入到网页中的某个地方，但是其中明明存在的脚本却不能得以运行，如果你听不懂我在说什么，说明你还不懂ajax或者用得少没遇到这种现象。通常来讲，页面中包含的脚本形式无非两种：第一种：var _hmt = _hmt || [];(func...
ajax返回javascript给页面执行
gaulhor的专栏
07-08 2819
因为一个需求，查询后如果没有数据，则返回给用户一个alert。 而我又比较懒，不喜欢在页面写alert。而且这样还多写了很多代码。经过多次试验，原来eval()函数正是我所要的。javascript:    var txt=http_request.responseText;eval(txt);action:response.getWriter().write(" var a=1; var b=2
asp ajax返回html代码,使用AJAX解析从ASP页面返回的HTML表格并提取特定单元格
weixin_33439618的博客
06-17 243
工作Intranet上有一个ASP页面，用于从多个传感器返回数据。数据以表格格式显示，具有多行和多列。使用AJAX解析从ASP页面返回的HTML表格并提取特定单元格我认为这很酷，如果我可以在我们的部门网站上显示一些输出。我想用ajax打开ASP页面，并从结果表中获取一些数据点。用AJAX打开页面非常简单，但我不确定该如何处理它。表的格式如下所示：Data ID 1DescriptionDataDa...
执行AJAX返回HTML片段中的JS脚本
M-zone
06-13 307
在开发中，做某一遮罩层显示功能发现： 如果AJAX加载的数据是一个HTML片段，而且这个HTML片段还包含脚本&lt;script&gt;块，那么在你把这数据插入到当前文档一个元素中，你会发现AJAX加载回来的脚本根本没有执行，但是这个页面在单独的情况下是可以执行的。 在网上查找资料，发现这个问题是AJAX数据传输常见的问题，一般有两种解决思路： 1 利用JavaScript的eval...
Ajax调用返回包含<script>标记的html片段的问题。
每天进步10％
10-10 419
很久没更新blog了， 今天讨论关于ajax调用返回的html片段中包含标记中包含function的问题， 又差点忘了，干脆记录到blog里，省的忘了。 问题：ajax调用html片段，使返回的标记中的function有效。 方法1：html片段中的添加defer属性。 方法2：对于prototype框架调用时，可以指定evalScript:true; 方法3（...
使用innerHTML插入js脚本不生效问题解决
Rex__404的博客
09-01 4818
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
ajax请求返回参数显示在jsp页面中
最新发布
06-10
要在 JSP 页面中显示 AJAX 请求返回的参数，你可以使用 JavaScript 和 DOM 操作。以下是一个示例代码： 1. 在 JSP 页面中添加一个元素用于显示返回的参数，比如 <div id="result"></div>。 2. 编写一个 JavaScript 函数用于发送 AJAX 请求并将返回的参数显示在页面上，示例如下： ``` function sendAjaxRequest() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("result").innerHTML = this.responseText; } }; xhttp.open("GET", "ajax_request.jsp", true); xhttp.send(); } ``` 3. 在 JSP 页面中添加一个按钮或链接，用于触发 AJAX 请求，比如 <button onclick="sendAjaxRequest()">发送请求</button>。 4. 在服务端编写一个 JSP 页面，用于处理 AJAX 请求并返回参数，比如 ajax_request.jsp。在这个页面中，你可以通过 request 对象获取请求参数，通过 response 对象返回响应参数，比如： ``` <% String param = request.getParameter("param"); String result = "Hello, " + param + "!"; response.setContentType("text/plain"); response.setCharacterEncoding("UTF-8"); response.getWriter().write(result); %> ``` 当你点击发送请求按钮时，JavaScript 函数 sendAjaxRequest() 会向 ajax_request.jsp 发送一个 AJAX 请求，并在返回参数后将其显示在页面上。注意，ajax_request.jsp 返回的参数必须是一个纯文本字符串，否则显示可能会出现问题。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值