一步:事先把要調用的信息(醫院的信息,療法,活動介紹,廣告圖片,商務通等一些信息) 做成html源碼形式的,如下圖:
第二步:打開站長工里面的HTML/JS轉換工具http://0x9.me/hOEzN 把事先弄好源碼放到上面的表單里面,然后這兒工具自動換成要JS代碼。如圖:
第三步: 把生成好的JS代碼復制到TXT文檔里面,然后把TXT格式改成JS就生成可JS源文件了,然后把做好的JS源文件通過FTP工具上傳到網站的服務器空間上去,如圖:
第四步:把剛剛上傳的JS源文件路徑復制下來,我們調用這JS就行了,JS代碼如下:
<script type="text/javascript" src="調用的JS源文件路徑" content="text/html; charset=gb2312" ></script>
最近寫博客真的是太痛苦了,倒不是寫博客本身,而是寫完之后往多個平臺發布的過程,一不注意就是十多分鐘往上的時間消耗。
為了解決這個問題,之前立項的“解決自媒體一鍵多平臺發布”項目必須得立刻著手完善了,爭取早日讓自己從發布這件事情上解脫出來專心寫文章。
【hxsfx的JavaScript庫】這個系列基本上是為“一鍵多平臺發布”項目打基礎用的。之所以把各個功能模塊拆分出來,是為了盡量讓小伙伴能夠復制即用(在兼容性方面,因為個人能力的原因,幾乎只會兼容Chrome瀏覽器)。
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,獲取數據。這允許網頁在不影響用戶操作的情況下,更新頁面的局部內容。
//hxsfx.js
(function () {
window.hxsfx={};
})();
//ajax.js
(function () {
window.hxsfx.ajax={
};
})();
//ajax.js
(function () {
window.hxsfx.ajax={
loadHTML: function (ele, url) {
}
};
})();
//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();
}
};
})();
//ajax.js
//時間戳用來解決加載頁面緩存的問題
var urlTimeStamp="timeStamp=" + new Date().getTime();
url +=((url.indexOf('?') >=0) ? "&" : "?") + urlTimeStamp;
//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]);
}
//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();
}
};
})();
<!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>
<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編譯器
引用依賴的文件
在 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函數。
完整代碼示例:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。