<html xmlns="http://www.w3.org/1999/xhtml"><head><br">

跨浏览器的设置innerHTML方法

80酷酷网    80kuku.com

  浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>


<script type="text/javascript">
<!--
/*
 * 描述:跨浏览器的设置 innerHTML 方法
 *       允许插入的 HTML 代码中包含 script 和 style
 * 作者:kenxu <kenajaxwing.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 = '<div IE</div>' + htmlCode;
        htmlCode = htmlCode.replace(/<script([^>]*)>/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);
        }
    }
}

/*
 * 描述:通过重定义 document.write 函数,避免在使用 setInnerHTML 时,
 *       插入的 HTML 代码中包含 document.write ,导致原页面受到破坏的情况。
 */
document.write = function() {
    var body = document.getElementsByTagName('body')[0];
    for (var i = 0; i < arguments.length; i++) {
        argument = arguments[i];
        if (typeof argument == 'string') {
            var el = body.appendChild(document.createElement('div'));
            setInnerHTML(el, argument)
        }
    }
}
//-->
</script></head><body>
<textarea id="inputbox" cols="80" rows="25">请输入您要插入到下面容器中的内容,可以包含脚本。</textarea>

<button >确定</button>
<div id="container" 1px solid rgb(204, 204, 204); width: 640px; height: 480px;"></div>
</body></html>

 



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: