zoukankan      html  css  js  c++  java

  • 前端开发学习之——利用模板实现涉及url问题时的bug分析及解决（chrome源码）

    例如我们要实现如下页面，其中历史页面列表想来自底层返回的数据，此处用testData代替：

    最初我写的实现代码如下：

    html文件：

    <!doctype html>
<html class="starting-up" i18n-values="dir:textdirection; lang:language">
  <head>
    <meta charset="utf-8">
    <title i18n-content="title"></title>
    <link rel="stylesheet" type="text/css" href="last_tabs_list.css">
    <link rel="stylesheet" href="cdosbrowser://resources/css/tree.css">
    <link rel="stylesheet" href="cdosbrowser://resources/css/widgets.css">
    <script src="cdosbrowser://resources/js/cr.js"></script>
    <script src="cdosbrowser://resources/js/cr/ui.js"></script>
    <script src="cdosbrowser://resources/js/cr/ui/tree.js"></script>
    <script src="cdosbrowser://resources/js/util.js"></script>
　　 <script src="cdosbrowser://resources/js/icon.js"></script>

  </head>
  <body>
  <div class="container">
    <div class="nav_container">
        <div class="top_nav">
            <p>上次未关闭的页面</p>
        </div>
    </div>

    <div class="content">
        <div class="content_top">
            <div class="select_all_container">
                <input type="checkbox" id="check_all"></input>
                <span class="select_all">全选</span>
            </div>
            <div class="open_selected_tabs">
                <button class="open_all_selected" id="open_all_selected">打开选中页面</button>
            </div>
        </div>        
        <div id="tabs_list" class="tabs_list">
            <div class="tab_container" id="tab_{{index}}">
                <input type="checkbox" class="check" id="check_{{index}}"></input>
                <div class="favicon" style="background-image: {{bgimage}};"></div>
                <!--<div class="favicon" style='background-image: {{bgimage}};'></div>-->
                <div class="title">
                    <a href="{{url}}" target="_blank" title="{{title}}" focus-type="title" tabindex="0">{{title}}</a>
                </div>
            </div> 
        </div>
    </div>
    </div>
    <script src="last_tabs_list.js"></script

    js文件：

        var testData =
     [ {
       title: "历史记录",
       url: "cdosbrowser://history-frame/#range=3&offset=3"
    }, 
    {
       title: "cdosbrowser://help",
       url: "cdosbrowser://help/"
    },
     {
       title: "百度一下，你就知道",
       url: "https://www.baidu.com/"
    }, 
    {
       title: "爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看",
       url: "http://www.iqiyi.com/"
    } ]
    
    function checkAll(){
        console.log("checkEl.length="+checkEl.length);
        if(checkAllEl.checked){
            for(var i=0; i<checkEl.length; i++){
                checkEl[i].checked = true;
                console.log(checkEl.length);
                console.log(checkEl[i].checked);
            }
        }else{
            for(var i=0; i<checkEl.length; i++){
                checkEl[i].checked = false;
                $("open_all_selected").disabled = true;
            }
        }
        updateButtonStatus();
    }

    function tabsListDOM(data){
        var tabsListTemplate = $("tabs_list").innerHTML;
        var wrap=[];
        for(var i=0; i<data.length; i++){
            var backgroundImage  = cr.icon.getFavicon(data[i].url);
            var _tabsListTemplate  =   tabsListTemplate.replace(/{{index}}/g,i)
                                                       .replace(/{{url}}/,data[i].url)
                                                       .replace(/{{bgimage}}/,backgroundImage)
                                                       .replace(/{{title}}/g,data[i].title);
            
            wrap.push(_tabsListTemplate);
        }
        $("tabs_list").innerHTML = wrap.join('');
        //console.log("wrap.join('')="+wrap.join(''));
        //console.log("$('tabs_list').innerHTML="+$("tabs_list").innerHTML);
        checkEl = $("tabs_list").querySelectorAll(".check");
         checkAllEl = $("check_all");
        checkAllEl.checked =true;
        checkAll();
    }
    tabsListDOM(testData);

    function updateButtonStatus(){
        var anyChecked = document.querySelectorAll('#tabs_list input:checked') .length!= 0;
        $('open_all_selected').disabled = !anyChecked;
        console.log("anyChecked="+anyChecked);
    }

    function checkOne(){
        var flag = true;
        for(var i=0; i<checkEl.length; i++){
            if(!checkEl[i].checked){
                flag = false;
            }
        }
        if(flag){
            checkAllEl.checked = true;
        }else{
            checkAllEl.checked = false;
        }
        updateButtonStatus();
    }

    function openAllSelected(){
        var selectedUrl=[];
        for(var i=0; i<checkEl.length; i++){
            if(checkEl[i].checked){
                selectedUrl.push(testData[i].url);
                console.log(testData[i].url);
            }
        }
    }

    checkAllEl.addEventListener("click", checkAll);

    for(var i=0; i<checkEl.length; i++){
        checkEl[i].addEventListener("click", checkOne);
    }

    if((!$('open_all_selected').disabled)){
        $("open_all_selected").addEventListener("click", openAllSelected);    
    }

    打印结果如下：

    其中cr.icon.getFavicon(data[i].url)返回的数据是url("cdosbrowser://favicon/http://www.iqiyi.com/")

    wrap.join('')=
            <div class="tab_container" id="tab_0">
                <input type="checkbox" class="check" id="check_0">
                <div class="favicon" style="background-image: url("cdosbrowser://favicon/cdosbrowser://history-frame/#range=3&offset=3");"></div>
                <div class="title">
                    <a href="cdosbrowser://history-frame/#range=3&offset=3" target="_blank" title="历史记录" focus-type="title" tabindex="0">历史记录</a>
                </div>
            </div>
        
            <div class="tab_container" id="tab_1">
                <input type="checkbox" class="check" id="check_1">
                <div class="favicon" style="background-image: url("cdosbrowser://favicon/cdosbrowser://help/");"></div>
                <div class="title">
                    <a href="cdosbrowser://help/" target="_blank" title="cdosbrowser://help" focus-type="title" tabindex="0">cdosbrowser://help</a>
                </div>
            </div>
        
            <div class="tab_container" id="tab_2">
                <input type="checkbox" class="check" id="check_2">
                <div class="favicon" style="background-image: url("cdosbrowser://favicon/https://www.baidu.com/");"></div>
                <div class="title">
                    <a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道" focus-type="title" tabindex="0">百度一下，你就知道</a>
                </div>
            </div>
        
            <div class="tab_container" id="tab_3">
                <input type="checkbox" class="check" id="check_3">
                <div class="favicon" style="background-image: url("cdosbrowser://favicon/http://www.iqiyi.com/");"></div>
                <div class="title">
                    <a href="http://www.iqiyi.com/" target="_blank" title="爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看" focus-type="title" tabindex="0">爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看</a>
                </div>
            </div>
        
    $('tabs_list').innerHTML=
                <div class="tab_container" id="tab_0">
                <input type="checkbox" class="check" id="check_0">
                <div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" history-frame="" #range="3&amp;offset=3&quot;);&quot;"></div>
                <div class="title">
                    <a href="cdosbrowser://history-frame/#range=3&amp;offset=3" target="_blank" title="历史记录" focus-type="title" tabindex="0">历史记录</a>
                </div>
            </div>
        
            <div class="tab_container" id="tab_1">
                <input type="checkbox" class="check" id="check_1">
                <div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" help="" ");"=""></div>
                <div class="title">
                    <a href="cdosbrowser://help/" target="_blank" title="cdosbrowser://help" focus-type="title" tabindex="0">cdosbrowser://help</a>
                </div>
            </div>
        
            <div class="tab_container" id="tab_2">
                <input type="checkbox" class="check" id="check_2">
                <div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" https:="" www.baidu.com="" ");"=""></div>
                <div class="title">
                    <a href="https://www.baidu.com/" target="_blank" title="百度一下，你就知道" focus-type="title" tabindex="0">百度一下，你就知道</a>
                </div>
            </div>
        
            <div class="tab_container" id="tab_3">
                <input type="checkbox" class="check" id="check_3">
                <div class="favicon" style="background-image: url(" cdosbrowser:="" favicon="" http:="" www.iqiyi.com="" ");"=""></div>
                <div class="title">
                    <a href="http://www.iqiyi.com/" target="_blank" title="爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看" focus-type="title" tabindex="0">爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看</a>
                </div>
            </div>

    由上可见background-image的赋值产生了问题，而且神奇的是wrap.join('')打印的结果竟然和$('tabs_list').innerHTML不一样，而且前者看上去好像还是对的，后者已然是乱码。

    这是为什么呢？

    实际上wrap.join('')将模板拼接的时候还只是进行的字符串的运算，只是把我们组合的内容按部就班的展示给我们，但是赋值给innerHTML的时候就存在一个解析的过程了。

    而且其实在wrap.join('')打印的时候就能看出问题所在了，双引号包裹双引号产生的冲突，导致浏览器没办法正常解析。而且即使把外层的双引号改成单引号，打印结果仍然是双引号，不知道是否跟chrome内部有关。

    <div class="favicon" style="background-image: {{bgimage}};"></div>
<!--<div class="favicon" style='background-image: {{bgimage}};'></div>-->

    解决办法：

    法一：将除background-image之外的其他DOM结构构建好，再动态设置其background-image。

    法二：将整个模板直接作为变量，实现如下：

    <!doctype html>
<html class="starting-up" i18n-values="dir:textdirection; lang:language">
  <head>
    <meta charset="utf-8">
    <title i18n-content="title"></title>
    <link rel="stylesheet" type="text/css" href="last_tabs_list.css">
    <link rel="stylesheet" href="cdosbrowser://resources/css/tree.css">
    <link rel="stylesheet" href="cdosbrowser://resources/css/widgets.css">
     <script src="cdosbrowser://resources/js/cr.js"></script>
    <script src="cdosbrowser://resources/js/cr/ui.js"></script>
    <script src="cdosbrowser://resources/js/cr/ui/tree.js"></script>
    <script src="cdosbrowser://resources/js/util.js"></script>
<script src="cdosbrowser://resources/js/icon.js"></script>

  </head>
  <body>
  <div class="container">
    <div class="nav_container">
        <div class="top_nav">
            <p>上次未关闭的页面</p>
        </div>
    </div>

    <div class="content">
        <div class="content_top">
            <div class="select_all_container">
                <input type="checkbox" id="check_all"></input>
                <span class="select_all">全选</span>
            </div>
            <div class="open_selected_tabs">
                <button class="open_all_selected" id="open_all_selected">打开选中页面</button>
            </div>
        </div>        
        <div id="tabs_list" class="tabs_list">
        </div>
    </div>
    </div>
    <!-- <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> -->
    <script src="last_tabs_list.js"></script>
  </body>
</html>

    js代码如下：

    //cr.define('last_tabs_list', function(){
//    'use strict'

    var testData =
     [ {
       title: "历史记录",
       url: "cdosbrowser://history-frame/#range=3&offset=3"
    }, 
    {
       title: "cdosbrowser://help",
       url: "cdosbrowser://help/"
    },
     {
       title: "百度一下，你就知道",
       url: "https://www.baidu.com/"
    }, 
    {
       title: "爱奇艺-全球领先的在线视频网站-海量正版高清视频在线观看",
       url: "http://www.iqiyi.com/"
    } ]
    
    
    function checkAll(){
        console.log("checkEl.length="+checkEl.length);
        if(checkAllEl.checked){
            for(var i=0; i<checkEl.length; i++){
                checkEl[i].checked = true;
                console.log(checkEl.length);
                console.log(checkEl[i].checked);
            }
        }else{
            for(var i=0; i<checkEl.length; i++){
                checkEl[i].checked = false;
                $("open_all_selected").disabled = true;
            }
        }
        updateButtonStatus();
    }

    function tabsListDOM(data){
        var tabsListTemplate = '<div class="tab_container" id="tab_{{index}}">' +
                '<input type="checkbox" class="check" id="check_{{index}}"></input>'+
                "<div class='favicon' style='background-image: {{bgimage}};'></div>" +
                '<div class="title">' +
                    '<a href="{{url}}" target="_blank" title="{{title}}" focus-type="title" tabindex="0">{{title}}</a>'+
                '</div>' +
            '</div>';
        var wrap=[];
        for(var i=0; i<data.length; i++){
            var backgroundImage  = cr.icon.getFavicon(data[i].url);
            var _tabsListTemplate  =   tabsListTemplate.replace(/{{index}}/g,i)
                                                       .replace(/{{url}}/,data[i].url)
                                                       .replace(/{{bgimage}}/,backgroundImage)
                                                       .replace(/{{title}}/g,data[i].title);
            
            wrap.push(_tabsListTemplate);
        }
        $("tabs_list").innerHTML = wrap.join('');
        console.log("wrap.join('')="+wrap.join(''));
        console.log("$('tabs_list').innerHTML="+$("tabs_list").innerHTML);
        checkEl = $("tabs_list").querySelectorAll(".check");
         checkAllEl = $("check_all");
        checkAllEl.checked =true;
        checkAll();
    }
    tabsListDOM(testData);

    function updateButtonStatus(){
        var anyChecked = document.querySelectorAll('#tabs_list input:checked') .length!= 0;
        $('open_all_selected').disabled = !anyChecked;
        console.log("anyChecked="+anyChecked);
    }

    function checkOne(){
        var flag = true;
        for(var i=0; i<checkEl.length; i++){
            if(!checkEl[i].checked){
                flag = false;
            }
        }
        if(flag){
            checkAllEl.checked = true;
        }else{
            checkAllEl.checked = false;
        }
        updateButtonStatus();
    }

    function openAllSelected(){
        var selectedUrl=[];
        for(var i=0; i<checkEl.length; i++){
            if(checkEl[i].checked){
                selectedUrl.push(testData[i].url);
                console.log(testData[i].url);
            }
        }
    }

    checkAllEl.addEventListener("click", checkAll);

    for(var i=0; i<checkEl.length; i++){
        checkEl[i].addEventListener("click", checkOne);
    }

    if((!$('open_all_selected').disabled)){
        $("open_all_selected").addEventListener("click", openAllSelected);    
    }
//});

//document.addEventListener('DOMContentLoaded', last_tabs_list.onLoad);
  • 相关阅读:
    查看.Net Framework的版本（PC和WinCE）
    .NET C# 创建WebService服务简单的例子
    ORA-01502错误成因和解决方法
    高水线 High water mark(HWM)
    Oracle高水位线(HWM)及性能优化
    解决（Oracle）ORA-12528: TNS: 监听程序: 所有适用例程都无法建立新连接 问题
    ORACLE切非归档模式：
    ArcGIS学习记录—dbf shp shx sbn sbx mdb adf等类型的文件的解释
    ArcGIS学习记录—ArcGIS ArcMap编辑状态中线打断的问题
    ArcGIS学习记录—Arcgis中点、线、面的相互转换方法
  • 原文地址：https://www.cnblogs.com/yanayana/p/6703294.html
Copyright © 2011-2022 走看看