`

Ajax返回文本innerHTML无法执行javascript代码

    博客分类:
  • Ajax
阅读更多

 

在实际应用的过程中,我们经常会遇到使用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才能有效。

 

解决方法:使用defer属性

缺点:只能用于IE,FireFox不支持!

使用场景:当作文本时使用会按JavaScript来处理,如果在HTML中使用则起反作用,不会执行脚本。

<script type="text/javascript" defer="defer">

分享到:
评论

相关推荐

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

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

    Ajax发送请求js代码

    打包好的Ajax代码,实现了对象化,使用时直接调用就可以了,调用时需要重构三个方法,如下: &lt;script type="text/javascript"&gt; function onerror() //错误处理方法 { alert("error"); } function getInfo() //...

    用AJAX返回HTML片段中的JavaScript脚本

    这是AJAX开发中很常见的问题,如果你不是一直在用JavaScript框架做开发,相信你早就发现这个问题了。本文分析了两个解决办法,其中一个是讲解jQuery框架的实现。 一、 问题描述 下面举个简单的例子,演示问题所在。...

    北京中科信软AJAX培训

    JavaScript与Ajax JavaScript基本数据结构 JavaScript表达式和运算符 JavaScript的流程控制和函数 JavaScript的对象 窗口及输入输出 DOM DOM与Ajax DOM眼中的HTML文档——树 HTML文档的节点 使用DOM操作HTML文档 ...

    可用 js ajax代码

    错误代码:"+xmlHttp.status); } } } function initType() { if(xmlHttp.readyState == 4) {//4:表示Ajax引擎初始化成功 if(xmlHttp.status == 200) {//http协议成功 var typeSelect = document....

    javascript初级代码学习.zip

    001-HTML中嵌入JavaScript代码的第一种方式 002-HTML中嵌入JavaScript代码的第二种方式 003-HTML中嵌入JavaScript代码的第三种方式 001-BOM编程-open和close 002-open 003-弹出消息框和确认框 004-当前窗口设置为...

    JavaScript 数字时钟代码

    JavaScript 数字时钟代码 function Time(){ if (!document.layers&&!document.all) return var Timer=new Date() var hours=Timer.getHours() var minutes=Timer.getMinutes() var seconds=Timer.getSeconds()...

    Ajax基础教程(扫描版)

    5.1 使用jsdoc建立javascript代码的文档 125 5.1.1 安装 126 5.1.2 用法 126 5.2 使用firefox扩展验证html内容 129 5.2.1 html validator 130 5.2.2 checky .. 132 5.3 使用dom inspector搜索节点 133 5.4 ...

    ajax获取单独页面

    ajax 获取单独页面 xmlhttp innerHTML ajaxtab 非常实用,简单易懂的ajax教程

    关于在innerHTML中JS不执行的问题

    NULL 博文链接:https://wuzhengxuan.iteye.com/blog/1263906

    【卷一/共两卷】AJAX实战pdf高清版90M

    8.2.3 优化Ajax应用的执行速度 8.3 JavaScript的内存使用量 8.3.1 避免内存泄漏 8.3.2 Ajax的特殊考虑因素 8.4考虑性能的设计 8.4.1 测量内存使用量 8.4.2 简单示例 8.4.3 结果:如何将内存使用量缩减150倍 8.5 小结...

    react-Innerself使用innerHTML将ReactRedux转换成50行代码

    Innerself – 使用innerHTML将React / Redux转换成50行代码

    ajax中指定innerHTML时如何应用其中的SCRIPT的研究

    ajax中指定innerHTML时如何应用其中的SCRIPT的研究

    innerHTML_outerHTML.rar_javascript

    显示innerHTML 和 outterHTML

    AJAX函数库

    &lt;script type="text/javascript" src="ajax.js"&gt; &lt;div id="mydiv"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; function myFun(){ loading('正在加载数据,请稍候。。。','mydiv'); var outfun = function(xml,txt){ ...

    JavaScript详解(第2版)

    1.11 JavaScript代码放在哪儿 17 1.12 验证标签 20 1.12.1 W3C验证工具 21 1.12.2 Validome验证工具 21 1.13 应知应会 22 练习 23 第2章 脚本的安装 24 2.1 HTML文档与JavaScript 24 2.2 语法细节 ...

    javascript appendChild,innerHTML,join性能比较代码

    代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; &lt;html xmlns=”http://www.w3.org/1999/xhtml” &gt; &lt;head&...

    innerHTML的简单应用

    innerHTML的简单应用

    基于javascript,ajax,json的在前端动态显示你的任何表格数据

    基于ajax,解决在前端显示各种表格数据的麻烦,包含的技术有json,javascript,C#,ajax等,具体说明在我的博客里有;

Global site tag (gtag.js) - Google Analytics