- 请教ajax嵌入页面JS失效的问题。
-
我用ajax把一个jsp页面嵌入到另一个jsp页面的DIV中，其它一切都正常，但嵌入页面的JS都失效了，我嵌入的时候用得是document.getElementById(idName).innerHTML=msg,msg是ajax返回的页面信息,请问这是为什么？有人说DIV中的js都会失效，但我测试了一下，还是有用啊。请问这个问题该如何解决？谢谢了。
[quote]很多人都可能遇到过这种情况：设置 innerHTML 的时候，插入的 HTML 代码中包含脚本，但这些脚本却不生效，或者在 IE 上生效在其它浏览器上就不生效。原因很简单：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法。经过实践，归纳如下：
对于IE，首先 script 标签必须带 defer 属性，其次在插入时刻，innerHTML 的所属节点必须在 DOM 树中；对于 Firefox 和 Opera，在插入时刻，innerHTML 的所属节点不可以在 DOM 树中。
根据上面结论，给出通用的设置 innerHTML 方法：
[code="js"]/*
- 描述：跨浏览器的设置 innerHTML 方法
- 允许插入的 HTML 代码中包含 script 和 style
- 作者：kenxu ken@ajaxwing.com
- 日期：2006-03-23
- 参数：
- el: 合法的 DOM 树中的节点
- htmlCode: 合法的 HTML 代码
- 经测试的浏览器：ie5+, firefox1.5+, opera8.5+
/
var setInnerHTML = function (el, htmlCode) {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) {
htmlCode = 'for IE' + htmlCode; htmlCode = htmlCode.replace(/]</em>)>/gi, '<script$1 defer="true">'); el.innerHTML = htmlCode; el.removeChild(el.firstChild); } else { var el_next = el.nextSibling; var el_parent = el.parentNode; el_parent.removeChild(el); el.innerHTML = htmlCode; if (el_next) { el_parent.insertBefore(el, el_next) } else { el_parent.appendChild(el); } } }[/code][/quote]</li> </ul>
[quote]嵌入页面还有没有其它的方法?不包括iframe的. [/quote]
不使用jframe将页面中js隔离，则不可避免地出现JS冲突的问题。。
简单的解决办法就尽量为每个变量，尤其是外部变量取不同的变量名称。。
为每个function方法取不同的名称。。
当然，可以参考jquery的实现。
将变量与方法封装到一个命名空间中去。
如：
code="java"{
var b;
alert(11);
})();[/code]
与
[code="java"]var b;
alert(11);[/code]
的效果相同，但是上面的不会出现变量污染，而下面的会。上面的b是内部变量，而下面的是全局的。
当然，对于alert()来说，这里是不可避免的问题，只要重复加载了，那么就会出现问题。。。
当然，，方法重复加载也不是什么大不了的事情 ，还是那句话，，就是看那里重复加载会带来什么影响就是了。。而变量重复加载可能会带来比较重要的影响。