zoukankan      html  css  js  c++  java
  • 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);

    }; 

    做个开心快乐人
  • 相关阅读:
    信号量Semaphore
    回环屏障CyclicBarrier
    线程同步器CountDownLatch
    vue 类似微信通讯录格式实现网易云音乐的歌手字母查询
    vue使用element的多个表格使用v-if切换,使用 :key="Math.random()" 后,表格排序出现问题
    vue使用pinyin的npm包将文字转为大写首字母字母
    vue中使用better-scroll滚动无效
    vue 移动端 图片懒加载 lazy
    表格配合keepalive缓存
    在保存数据之后,不知道什么时候清空数据,不如试试beforeRouteEnter
  • 原文地址:https://www.cnblogs.com/qq419524837/p/2683551.html
Copyright © 2011-2022 走看看