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 + ")异常】" + 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 + ")异常】" + 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小时内与您取得联系。

整合营销服务商