Web 调试,兼容浏览器的在线调试（系列）

1. javascript 动态在html 中插入 css 样式
2. javascript 动态在html 中插入 代码

上面所指的动态插入不是引入 某个.css,.js 的文件

 

1.动态插入css代码 

function loadStyleByString(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
                //在Firefox、Safrai、Chrome和Opera中运行，在IE中则会报错,IE将<style>视为一个特殊的、与<script>类似的节点，不允许访问其子节点。事实上，IE此时抛出的错误与向<script>元素添加子节点时抛出的错误相同。解决IE中的这个问题的办法，就是访问元素的styleSheet属性，该属性又有一个cssText属性，可以接受CSS代码
        style.appendChild(document.createTextNode(css));
    } catch (ex) {
                //ie 系列 ,
        style.styleSheet.cssText = css;
    }
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style); 

 

2.动态插入 javascript 代码

 function loadScriptByString(script){    

    var g = document.createElement('script');
    var s = document.getElementsByTagName('head')[0];
    g.text =script;
    s.parentNode.insertBefore(g, s);
}

 

工作这么久自己整理的一些常用代码(不是自己写的),感觉还挺好用的，准备弄个WEB调试小工具，javascript的不用安装什么插件即可，Firefox,Chrome，里面的调试功能非常强悍了

 

 

附上一个动态引入 js,css文件在代码

调用方法 

js - MiniSite.JsLoader.load('xx.js',function(){alert('js加载完成')});  

css -  MiniSite.CssLoader('xx.css');

MiniSite = new Object();
MiniSite.Browser = {
  ie: /msie/.test(window.navigator.userAgent.toLowerCase()),
  moz: /gecko/.test(window.navigator.userAgent.toLowerCase()),
  opera: /opera/.test(window.navigator.userAgent.toLowerCase()),
  safari: /safari/.test(window.navigator.userAgent.toLowerCase())
};

MiniSite.JsLoader = {
  load: function (sUrl, fCallback) {
    var _script = document.createElement("script");
    var charbt = "utf-8";
    if (arguments[2]) {
      charbt = arguments[2]
    }
    _script.setAttribute("charset", charbt);
    _script.setAttribute("type", "text/javascript");
    _script.setAttribute("src", sUrl);
    document.getElementsByTagName("head")[0].appendChild(_script);
    if (MiniSite.Browser.ie) {
      _script.onreadystatechange = function () {
        if (this.readyState == "loaded" || this.readyState == "complete") {
          fCallback();
        }
      };
    } else if (MiniSite.Browser.moz) {
      _script.onload = function () {
        fCallback();
      };
    } else {
      fCallback();
    }
  }
};

MiniSite.CssLoader = function (sUrl) {
  var _css = document.createElement("link");
  _css.setAttribute("rel", "stylesheet");
  _css.setAttribute("charset", "utf-8");
  _css.setAttribute("type", "text/css");
  _css.setAttribute("href", sUrl);
  document.getElementsByTagName("head")[0].appendChild(_css);

};