Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 国产91在线|亚洲,亚洲一区二区观看,三级视频中文字幕 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          HTML頁(yè)面用JS調(diào)用
          
        
           
          
	
	
          
		HTML頁(yè)面用JS調(diào)用
          
                        
          一步:事先把要調(diào)用的信息(醫(yī)院的信息，療法，活動(dòng)介紹，廣告圖片，商務(wù)通等一些信息) 做成html源碼形式的，如下圖：
          第二步:打開(kāi)站長(zhǎng)工里面的HTML/JS轉(zhuǎn)換工具h(yuǎn)ttp://0x9.me/hOEzN 把事先弄好源碼放到上面的表單里面，然后這兒工具自動(dòng)換成要JS代碼。如圖：
          第三步: 把生成好的JS代碼復(fù)制到TXT文檔里面，然后把TXT格式改成JS就生成可JS源文件了，然后把做好的JS源文件通過(guò)FTP工具上傳到網(wǎng)站的服務(wù)器空間上去，如圖:
          第四步:把剛剛上傳的JS源文件路徑復(fù)制下來(lái)，我們調(diào)用這JS就行了，JS代碼如下：
          <script type="text/javascript" src="調(diào)用的JS源文件路徑" content="text/html; charset=gb2312" ></script>
          言
          最近寫(xiě)博客真的是太痛苦了，倒不是寫(xiě)博客本身，而是寫(xiě)完之后往多個(gè)平臺(tái)發(fā)布的過(guò)程，一不注意就是十多分鐘往上的時(shí)間消耗。
          為了解決這個(gè)問(wèn)題，之前立項(xiàng)的“解決自媒體一鍵多平臺(tái)發(fā)布”項(xiàng)目必須得立刻著手完善了，爭(zhēng)取早日讓自己從發(fā)布這件事情上解脫出來(lái)專心寫(xiě)文章。
          【hxsfx的JavaScript庫(kù)】這個(gè)系列基本上是為“一鍵多平臺(tái)發(fā)布”項(xiàng)目打基礎(chǔ)用的。之所以把各個(gè)功能模塊拆分出來(lái)，是為了盡量讓小伙伴能夠復(fù)制即用（在兼容性方面，因?yàn)閭€(gè)人能力的原因，幾乎只會(huì)兼容Chrome瀏覽器）。

          hxsfx.ajax庫(kù)
          （一）介紹
          AJAX 是異步的 JavaScript 和 XML（Asynchronous JavaScript And XML），開(kāi)發(fā)hxsfx.ajax庫(kù)的主要目的就是希望通過(guò)異步加載HTML，從而盡量避免直接在js中寫(xiě)HTML來(lái)刷新頁(yè)面內(nèi)容。
          hxsfx.ajax這個(gè)庫(kù)與jquery的ajax功能基本一致，不過(guò)短時(shí)間內(nèi)應(yīng)該是寫(xiě)不到人家那么完善的。哈哈~
          各位小伙伴別問(wèn)，為什么不用jquery的ajax而要自己再寫(xiě)一個(gè)呢？
          問(wèn)就是，博主喜歡造輪子。開(kāi)玩笑了~
          其實(shí)原因是為了減少三方庫(kù)的依賴，達(dá)到對(duì)項(xiàng)目的全面掌控。
          項(xiàng)目地址：https://github.com/hxsfx/hxsfx_web_tools
          （二）代碼
          要自己開(kāi)發(fā)一個(gè)ajax庫(kù)，需要借助Web API接口中的XMLHttpRequest（XHR）對(duì)象。
          XMLHttpRequest（XHR）對(duì)象用于與服務(wù)器交互。通過(guò) XMLHttpRequest 可以在不刷新頁(yè)面的情況下請(qǐng)求特定 URL，獲取數(shù)據(jù)。這允許網(wǎng)頁(yè)在不影響用戶操作的情況下，更新頁(yè)面的局部?jī)?nèi)容。
          1、在window對(duì)象上新建一個(gè)hxsfx對(duì)象，本系列的所有庫(kù)基本都會(huì)在hxsfx對(duì)象之中：
          //hxsfx.js
(function () {
    window.hxsfx={};
})();
          2、在hxsfx對(duì)象的基礎(chǔ)上新建一個(gè)ajax對(duì)象：
          //ajax.js
(function () {
    window.hxsfx.ajax={
    };
})();
          3、在ajax對(duì)象中新建loadHTML方法，設(shè)置兩個(gè)參數(shù)，分別是ele準(zhǔn)備加載HTML的容器元素和url加載HTML的地址：
          //ajax.js
(function () {
    window.hxsfx.ajax={
        loadHTML: function (ele, url) {
        }
    };
})();
          4、在loadHTML方法中新建XMLHttpRequest對(duì)象：
          //ajax.js
(function () {
    window.hxsfx.ajax={
        loadHTML: function (ele, url) {
            const httpRequest=new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange=function () {
                //為了讓代碼更健壯，使用try...catch來(lái)捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState===XMLHttpRequest.DONE) {
                        if (httpRequest.status===200) {
                              //在這處理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();
          5、為了解決加載HTML緩存的問(wèn)題，將loadHTML方法中傳入的URL參數(shù)后面加上一個(gè)時(shí)間戳：
          //ajax.js
//時(shí)間戳用來(lái)解決加載頁(yè)面緩存的問(wèn)題
var urlTimeStamp="timeStamp=" + new Date().getTime();
url +=((url.indexOf('?') >=0) ? "&" : "?") + urlTimeStamp;
          6、【重點(diǎn)】在這處理返回的HTML時(shí)，如果直接將HTML加載到容器中，會(huì)出現(xiàn)HTML中Javascript代碼不執(zhí)行的問(wèn)題。解決這個(gè)問(wèn)題，需要將加載的script標(biāo)簽替換為script元素：
          //ajax.js
ele.innerHTML=httpRequest.responseText;
var scriptElements=ele.getElementsByTagName("script");
for (var i=0; i < scriptElements.length; i++) {
    var scriptElement=document.createElement("script");
    scriptElement.setAttribute("type", "text/javascript");
    var src=scriptElements[i].getAttribute("src");
    if (src) {
        //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁(yè)面的，需要修改為當(dāng)前頁(yè)面的引用路徑
        src=url.substring(0, url.lastIndexOf('/') + 1)  + src;
        src +=((src.indexOf('?') >=0) ? "&" : "?") + urlTimeStamp;
        scriptElement.setAttribute("src", src);
    }
    var scriptContent=scriptElements[i].innerHTML;
    if (scriptContent) {
        scriptElement.innerHTML=scriptContent;
    }
    //用生成的script元素去替換html中的script標(biāo)簽，以此來(lái)激活script代碼
    ele.replaceChild(scriptElement, scriptElements[i]);
}
          7、最后ajax.js完整代碼：
          //ajax.js
(function () {
    window.hxsfx.ajax={
        loadHTML: function (ele, url) {
            //時(shí)間戳用來(lái)解決加載頁(yè)面緩存的問(wèn)題
            var urlTimeStamp="timeStamp=" + new Date().getTime();
            url +=((url.indexOf('?') >=0) ? "&" : "?") + urlTimeStamp;
            const httpRequest=new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange=function () {
                //為了讓代碼更健壯，使用try...catch來(lái)捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState===XMLHttpRequest.DONE) {
                        if (httpRequest.status===200) {
                            ele.innerHTML=httpRequest.responseText;
                            var scriptElements=ele.getElementsByTagName("script");
                            for (var i=0; i < scriptElements.length; i++) {
                                var scriptElement=document.createElement("script");
                                scriptElement.setAttribute("type", "text/javascript");
                                var src=scriptElements[i].getAttribute("src");
                                if (src) {
                                    //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁(yè)面的，需要修改為當(dāng)前頁(yè)
                                    src=url.substring(0, url.lastIndexOf('/') + 1) + src;
                                    src +=((src.indexOf('?') >=0) ? "&" : "?") + urlTimeStamp;
                                    scriptElement.setAttribute("src", src);
                                }
                                var scriptContent=scriptElements[i].innerHTML;
                                if (scriptContent) {
                                    scriptElement.innerHTML=scriptContent;
                                }
                                //用生成的script元素去替換html中的script標(biāo)簽，以此來(lái)激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();
          （三）調(diào)用文檔
          1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾
          2、在Scripts文件夾同級(jí)目錄新建index.html頁(yè)面
          <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js庫(kù)測(cè)試</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload=function () {
                //調(diào)用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>
          3、在Scripts文件夾同級(jí)目錄，首先新建Views文件夾，接著其中新建test文件夾，最后在test文件夾中新建testPage.html
          <style>
    div#TestPageContainer {
        height: 300px;
        width: 300px;
        background-color: #F0F0F0;
    }
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
    function updateBackgroundColor() {
        try {
            var backgroundColor='#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
            document.getElementById("TestPageContainer").style.backgroundColor=backgroundColor;
        }
        catch (ex) {
            console.log(ex.message);
        }
    }
</script>
<div id="TestPageContainer">
    <button onclick="updateBackgroundColor()">更改背景色</button>
    <button onclick="modifyPFontColor()">更改下面一句話的字體顏色</button>
    <p id="P">這兒是一句話。</p>
</div>

          最后
          以上內(nèi)容只是hxsfx.ajax庫(kù)的開(kāi)始，后續(xù)的內(nèi)容更新小伙伴可以通過(guò)訪問(wèn)Github項(xiàng)目地址進(jìn)行獲取。
          說(shuō)明
          最近在項(xiàng)目上有個(gè)移動(dòng)端（uni-app）的需求，就是要在移動(dòng)端APP上的vue頁(yè)面中通過(guò)web-view組件來(lái)調(diào)用html頁(yè)面，并且要實(shí)現(xiàn)在html頁(yè)面中可以點(diǎn)擊一個(gè)元素來(lái)調(diào)用vue頁(yè)面中uni的API（掃碼接口），同時(shí)也可以在vue頁(yè)面中也可以調(diào)用html頁(yè)面中的js函數(shù)并進(jìn)行傳參。
          使用環(huán)境
          1. HBuilderX版本：2.8.11.20200907
          2. V3編譯器
          html頁(yè)面調(diào)用vue頁(yè)面中uni的API
          引用依賴的文件
          在 web-view 加載的 HTML 中調(diào)用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK
          <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
          注意：這些 JS 文件是在 web-view 加載的那個(gè) HTML 文件中引用的，而不是 uni-app 項(xiàng)目中的文件。
          監(jiān)聽(tīng) web-view 的 message 事件
          監(jiān)聽(tīng) web-view 組件的 message 事件，然后在事件回調(diào)的 event.detail.data 中接收傳遞過(guò)來(lái)的消息。
          <template>  

    <view>  

        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  

    </view>  

</template>  

<script>  

    export default {  

        methods: {  

            handleMessage(evt) {  

                console.log('接收到的消息：' + JSON.stringify(evt.detail.data));  

            }  

        }  

    }  

</script>
          調(diào)用的時(shí)機(jī)
          在引入上面的依賴文件后，需要在HTML中監(jiān)聽(tīng)UniAppJSBridgeReady，事件觸發(fā)后，
          才能安全調(diào)用uni的API。
          <script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

<script>

    document.querySelector('.btn-list').addEventListener('click', function(evt) {  

        var target=evt.target;  

        if (target.tagName==='BUTTON') {  

            var action=target.getAttribute('data-action');  

            if(action==='navigateTo') {  

				uni.postMessage({  

					data: {  

						action: 'postMessage'  

					}  

				});   

            }  

        }  

    }); 

</script>
          上面代碼的意思就是在html頁(yè)面中點(diǎn)擊按鈕列表中的某個(gè)按鈕，
          觸發(fā)了uni.postMessage接口，進(jìn)而調(diào)用了vue頁(yè)面methods中的handleMessage方法，
          并將參數(shù)data傳給了vue頁(yè)面。
          在vue頁(yè)面中調(diào)用html頁(yè)面的js函數(shù)
          示例代碼：
          var currentWebview=this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");
          其中的htmljsfuc就是要在html頁(yè)面中定義的js函數(shù)。
          完整代碼示例：
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
制服美女视频一区|
国产精品女同一区二区
|
伊人激情AV一区二区三区|
国产成人高清精品一区二区三区|
亚洲国产综合无码一区|
性色AV一区二区三区无码|
久久国产精品视频一区|
日韩精品无码Av一区二区|
无码人妻一区二区三区兔费|
久久精品国产免费一区|
国产嫖妓一区二区三区无码|
国产精品视频一区二区三区经|
国产亚洲欧洲Aⅴ综合一区|
国产精品538一区二区在线|
亚洲AV日韩AV一区二区三曲|
91精品国产一区|
中文字幕在线播放一区|
无码人妻一区二区三区免费视频
|
亚洲av区一区二区三|
精品国产一区二区三区在线|
中文字幕乱码亚洲精品一区|
精品无人区一区二区三区在线|
一区二区三区日韩精品|
久久青草精品一区二区三区|
亚洲AV午夜福利精品一区二区|
国产高清不卡一区二区|
亚洲日韩激情无码一区|
中文字幕一区二区人妻性色
|
日韩精品福利视频一区二区三区|
国产精品视频一区二区三区|
国产福利一区二区三区在线视频|
日韩av无码一区二区三区|
一区二区三区四区视频|
中文字幕一区二区三区久久网站|
亚洲国产老鸭窝一区二区三区|
少妇无码一区二区二三区|
亚洲第一区二区快射影院|
最新中文字幕一区二区乱码
|
亚洲日韩一区二区一无码|
亚洲欧美国产国产综合一区|
国产一区二区三区日韩精品|