HTML頁面用JS調用

一步:事先把要調用的信息(醫院的信息，療法，活動介紹，廣告圖片，商務通等一些信息) 做成html源碼形式的，如下圖：

第二步:打開站長工里面的HTML/JS轉換工具http://0x9.me/hOEzN 把事先弄好源碼放到上面的表單里面，然后這兒工具自動換成要JS代碼。如圖：

第三步: 把生成好的JS代碼復制到TXT文檔里面，然后把TXT格式改成JS就生成可JS源文件了，然后把做好的JS源文件通過FTP工具上傳到網站的服務器空間上去，如圖:

第四步:把剛剛上傳的JS源文件路徑復制下來，我們調用這JS就行了，JS代碼如下：

言

最近寫博客真的是太痛苦了，倒不是寫博客本身，而是寫完之后往多個平臺發布的過程，一不注意就是十多分鐘往上的時間消耗。

為了解決這個問題，之前立項的“解決自媒體一鍵多平臺發布”項目必須得立刻著手完善了，爭取早日讓自己從發布這件事情上解脫出來專心寫文章。

【hxsfx的JavaScript庫】這個系列基本上是為“一鍵多平臺發布”項目打基礎用的。之所以把各個功能模塊拆分出來，是為了盡量讓小伙伴能夠復制即用（在兼容性方面，因為個人能力的原因，幾乎只會兼容Chrome瀏覽器）。

hxsfx.ajax庫

（一）介紹

AJAX 是異步的 JavaScript 和 XML（Asynchronous JavaScript And XML），開發hxsfx.ajax庫的主要目的就是希望通過異步加載HTML，從而盡量避免直接在js中寫HTML來刷新頁面內容。

hxsfx.ajax這個庫與jquery的ajax功能基本一致，不過短時間內應該是寫不到人家那么完善的。哈哈~

各位小伙伴別問，為什么不用jquery的ajax而要自己再寫一個呢？

問就是，博主喜歡造輪子。開玩笑了~

其實原因是為了減少三方庫的依賴，達到對項目的全面掌控。

項目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代碼

要自己開發一個ajax庫，需要借助Web API接口中的XMLHttpRequest（XHR）對象。

XMLHttpRequest（XHR）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。

1、在window對象上新建一個hxsfx對象，本系列的所有庫基本都會在hxsfx對象之中：

//hxsfx.js
(function () {
    window.hxsfx={};
})();

2、在hxsfx對象的基礎上新建一個ajax對象：

//ajax.js
(function () {
    window.hxsfx.ajax={
    };
})();

3、在ajax對象中新建loadHTML方法，設置兩個參數，分別是ele準備加載HTML的容器元素和url加載HTML的地址：

//ajax.js
(function () {
    window.hxsfx.ajax={
        loadHTML: function (ele, url) {
        }
    };
})();

4、在loadHTML方法中新建XMLHttpRequest對象：

//ajax.js
(function () {
    window.hxsfx.ajax={
        loadHTML: function (ele, url) {
            const httpRequest=new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange=function () {
                //為了讓代碼更健壯，使用try...catch來捕獲返回狀態判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState===XMLHttpRequest.DONE) {
                        if (httpRequest.status===200) {
                              //在這處理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請求出錯】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異?！?#34; + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

5、為了解決加載HTML緩存的問題，將loadHTML方法中傳入的URL參數后面加上一個時間戳：

//ajax.js
//時間戳用來解決加載頁面緩存的問題
var urlTimeStamp="timeStamp=" + new Date().getTime();
url +=((url.indexOf('?') >=0) ? "&" : "?") + urlTimeStamp;

6、【重點】在這處理返回的HTML時，如果直接將HTML加載到容器中，會出現HTML中Javascript代碼不執行的問題。解決這個問題，需要將加載的script標簽替換為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) {
        //因為加載的src路徑是之前相對加載HTML頁面的，需要修改為當前頁面的引用路徑
        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標簽，以此來激活script代碼
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代碼：

//ajax.js
(function () {
    window.hxsfx.ajax={
        loadHTML: function (ele, url) {
            //時間戳用來解決加載頁面緩存的問題
            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來捕獲返回狀態判斷和處理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) {
                                    //因為加載的src路徑是之前相對加載HTML頁面的，需要修改為當前頁
                                    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標簽，以此來激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請求出錯】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異?！?#34; + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）調用文檔

1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾

2、在Scripts文件夾同級目錄新建index.html頁面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js庫測試</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload=function () {
                //調用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>

3、在Scripts文件夾同級目錄，首先新建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>

最后

以上內容只是hxsfx.ajax庫的開始，后續的內容更新小伙伴可以通過訪問Github項目地址進行獲取。

說明

最近在項目上有個移動端（uni-app）的需求，就是要在移動端APP上的vue頁面中通過web-view組件來調用html頁面，并且要實現在html頁面中可以點擊一個元素來調用vue頁面中uni的API（掃碼接口），同時也可以在vue頁面中也可以調用html頁面中的js函數并進行傳參。

使用環境

1. HBuilderX版本：2.8.11.20200907

2. V3編譯器

html頁面調用vue頁面中uni的API

引用依賴的文件

在 web-view 加載的 HTML 中調用 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 加載的那個 HTML 文件中引用的，而不是 uni-app 項目中的文件。

監聽 web-view 的 message 事件

監聽 web-view 組件的 message 事件，然后在事件回調的 event.detail.data 中接收傳遞過來的消息。

<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>

調用的時機

在引入上面的依賴文件后，需要在HTML中監聽UniAppJSBridgeReady，事件觸發后，

才能安全調用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頁面中點擊按鈕列表中的某個按鈕，

觸發了uni.postMessage接口，進而調用了vue頁面methods中的handleMessage方法，

并將參數data傳給了vue頁面。

在vue頁面中調用html頁面的js函數

示例代碼：

var currentWebview=this.$mp.page.$getAppWebview().children()[0];
currentWebview.evalJS("htmljsfuc('"+res.result+"')");

其中的htmljsfuc就是要在html頁面中定義的js函數。

完整代碼示例：

在線咨詢

上一篇：vue3的宏到底是什么東西？
下一篇：零基礎學編程（hover）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML頁面用JS調用

言

hxsfx.ajax庫

（一）介紹

（二）代碼

1、在window對象上新建一個hxsfx對象，本系列的所有庫基本都會在hxsfx對象之中：

2、在hxsfx對象的基礎上新建一個ajax對象：

3、在ajax對象中新建loadHTML方法，設置兩個參數，分別是ele準備加載HTML的容器元素和url加載HTML的地址：

4、在loadHTML方法中新建XMLHttpRequest對象：

5、為了解決加載HTML緩存的問題，將loadHTML方法中傳入的URL參數后面加上一個時間戳：

6、【重點】在這處理返回的HTML時，如果直接將HTML加載到容器中，會出現HTML中Javascript代碼不執行的問題。解決這個問題，需要將加載的script標簽替換為script元素：

7、最后ajax.js完整代碼：