跨浏览器的设置innerHTML方法

浏览器

<!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 <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 = '<div style="display:none">for 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><br>
<button >确定</button>
<div id="container" style="border: 1px solid rgb(204, 204, 204); width: 640px; height: 480px;"></div>
</body></html>

 

时间: 2024-12-31 08:23:51

跨浏览器的设置innerHTML方法的相关文章

跨浏览器的设置innerHTML方法_javascript技巧

Ajax是个好东西,但使用起来却不是那么方便.问题总结如下: 在各种浏览器上的创建方式和使用方法不一致  各个浏览器对响应的缓存策略有所不同  浏览器存在跨域获取限制  前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 proxy .Modello.ajax 就是提供这套解决方案的工具集. 安装 下载 Modello 和 Mdello.ajax  解压并将 modello.js, modello.

Iframe实现跨浏览器自适应高度解决方法_jquery

本文以实例形式讲述了Iframe实现跨浏览器自适应高度解决方法,非常具有实用价值.分享给大家供大家参考之用.具体方法如下: 该方法使用了jQuery,因此需要在iframe的src页面里面引入jQuery. 父页面里面相对简单一点,主要包含以下代码: <iframe id="if1" scrolling="no" src="2.html"></iframe> 在iframe的src页面里面代码如下: <script

Flexbox跨浏览器兼容Bug解决方法

在IE10和IE11中发现了一个Bug,就是Sticky footer实际上不会粘贴在页面的底部.我花了很多时间来解决这个问题,但始终没有成功. 起初,我真的很生气.在Flexbox出现之前,如果在不知道页脚的确切尺寸情况之下,要使用纯CSS来实现Sticky Footer的效果是不太可能.Flexbox改变了这一切,可以使用CSS解决这个问题. 失望之后,我最终得出一个结论,这不是什么大不了的事情.我的意思是,从渐进增强的角度来看,我的解决方案还是相当不错的.虽然它在IE并不完美,但不至于坏得

javascript跨浏览器的属性判断方法

 这篇文章主要介绍了javascript跨浏览器的属性判断的方法,需要的朋友可以参考下 今天在写代码的时候发现一个很容易出错的地方.当我们在声明变量时,常常会因为不同的 browser 有不同的 API 定义,然后用以下的写法来判断哪一个属性,例如:    代码如下:var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElem

javascript跨浏览器的属性判断方法_javascript技巧

今天在写代码的时候发现一个很容易出错的地方.当我们在声明变量时,常常会因为不同的 browser 有不同的 API 定义,然后用以下的写法来判断哪一个属性,例如: 复制代码 代码如下: var fullscreenElement = document.mozFullScreenElement || document.webkitFullscreenElement || document.fullscreenElement; 用||来检查要用哪一个 attribute.不过要小心 javascri

js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法

  这篇文章主要介绍了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法,较为详细的分析了错误的原因及对应的解决方法,需要的朋友可以参考下 本文实例讲述了js插件设置innerHTML时在IE8下提示"未知运行时错误"解决方法.分享给大家供大家参考.具体分析如下: 问题描述: 网站中使用了一个js插件,设置innerHTML时,在IE8下报错"未知运行时错误": ? 1 2 3 4 5 <div id="di

开发跨浏览器的JavaScript方法说明第1/2页_javascript技巧

开发跨浏览器的JavaScript 1. childNodes在ff中和ie的区别. ff中的node(nodeType = 1)都是用textNode(nodeType = 3)分开的,而ie/op不是这样的. <div id="box1"><span>content</span></div> 在ff下,box1的childNodes为3个,ie下为1个. 2. 设置某个node对象的style class名称. ie中要设置某个nod

跨浏览器PHP下载文件名中的中文乱码问题解决方法

 这篇文章主要介绍了跨浏览器PHP下载文件名中的中文乱码问题解决方法,涉及php针对中文编码的转码技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了跨浏览器PHP下载文件名中的中文乱码问题解决方法.分享给大家供大家参考.具体如下:   代码如下: <?php $ua = $_SERVER["HTTP_USER_AGENT"]; $filename = "中文 文件名.txt"; $encoded_filename = urlencode(

JavaScript跨浏览器获取页面中相同class节点的方法

 这篇文章主要介绍了JavaScript跨浏览器获取页面中相同class节点的方法,本文讲解使用getELementsByClassName函数解决这个需求,并给了一个开源的getELementsByClassName函数实现,功能更加强大,需要的朋友可以参考下     网页开发时,在很多时候我们需要操作相同类名的元素,即class相同的元素.昨天参加笔试,有一道相关的题目没答上来: JavaScript获取页面中class为test的节点 于是收集了一些相关的资料,在本文中列举了两种我觉得比较