HTML與CSS的鏈接方式分類

.行內(nèi)式

直接在標(biāo)簽后面添加該標(biāo)簽的屬性值

例如:

二.嵌入式

在title標(biāo)簽后添加<style type="text/css"></style>

注意：需要將樣式放入<head></head>中

例如：

<!DOCTYPE html>

<head>

<title>css樣式使用</title>

body{

background-color: antiquewhite;

}

background-color: aqua;

}

</style>

</head>

<body>

<h1>CSS使用規(guī)則</h1>

<p>CSS使用規(guī)則/p>

</body>

三.導(dǎo)入式

創(chuàng)建css樣式表如mystyle.css，再在HTML中鏈接此mystyle.css樣式表。

@import"mystyle.css"

</style>

四.鏈接式

創(chuàng)建css樣式表如style.css，再在HTML中鏈接此style.css樣式表。

例如：

HTML例子：

<!DOCTYPE html>

<head>

<title>css樣式使用</title>

</head>

<body>

<h1>CSS使用規(guī)則</h1>

<p>CSS使用規(guī)則/p>

</body>

</html>

CSS例子：

body{

background-color: antiquewhite;

font-size: 17px;

}

結(jié)果圖：

五.采用導(dǎo)入式和鏈接式還是有不同的區(qū)別的：

1.使用鏈接式時(shí)，會(huì)在加載頁(yè)面主體部分之前裝載CSS文件，這樣顯示出來頁(yè)面一開始就是帶有樣式效果的；

使用導(dǎo)入式時(shí)，會(huì)在整個(gè)頁(yè)面裝載完成后在裝載CSS文件，對(duì)于有的瀏覽器來說，在一些情況下，如果網(wǎng)頁(yè)文件體積比較大的的時(shí)候，則會(huì)出現(xiàn)先顯示無(wú)樣式的頁(yè)面，閃爍一下在出現(xiàn)設(shè)置樣式后的效果，對(duì)于瀏覽者的感受，這是導(dǎo)入式的一個(gè)缺陷。

2.對(duì)于一些較大的網(wǎng)站，為了便于維護(hù)，可能會(huì)希望把所有的CSS樣式分類別放到幾個(gè)CSS文件中，如果這樣使用鏈接式引入，就需要幾個(gè)語(yǔ)句分別導(dǎo)入CSS文件。如果要調(diào)整CSS文件的分類，就需要同時(shí)調(diào)整HTML文件。這對(duì)于維護(hù)工作來說，是一個(gè)巨大的缺陷。如果使用導(dǎo)入式，則可以只引進(jìn)一個(gè)總的CSS文件，在這個(gè)文件中在導(dǎo)入其他獨(dú)立的CSS文件；而鏈接式則不具備這個(gè)功能。

因此，建議如果需要引入一個(gè)CSS文件，則使用鏈接方式；如果需要引入多個(gè)CSS文件，則首先用鏈接方式引入一個(gè)“目錄”CSS文化，在這個(gè)“目錄”CSS文件中再使用導(dǎo)入式引入其他CSS文件。

但是，若是希望通過JavaScript來動(dòng)態(tài)決定引入哪個(gè)CSS文件，則必須使用鏈接方式才能實(shí)現(xiàn)。

說明

最近在項(xiàng)目上有個(gè)移動(dòng)端（uni-app）的需求，就是要在移動(dòng)端APP上的vue頁(yè)面中通過web-view組件來調(diào)用html頁(yè)面，并且要實(shí)現(xiàn)在html頁(yè)面中可以點(diǎn)擊一個(gè)元素來調(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)聽 web-view 的 message 事件

監(jiān)聽 web-view 組件的 message 事件，然后在事件回調(diào)的 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>

調(diào)用的時(shí)機(jī)

在引入上面的依賴文件后，需要在HTML中監(jiān)聽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ù)。

完整代碼示例：

、使用跨文檔消息傳遞（Cross-document Messaging）

可以在不同窗口或iframe之間安全地傳遞消息，即使這些窗口或iframe來自不同的域。以下是使用window.postMessage()方法進(jìn)行跨域消息傳遞的基本示例：

假設(shè)有兩個(gè)頁(yè)面：page1.html和page2.html，它們分別位于不同的域。

在page1.html中，我們想要向page2.html發(fā)送消息：

<!-- page1.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 1</title>
</head>
<body>
    <button id="sendMessageBtn">Send Message to Page 2</button>

    <script>
        const sendMessageBtn = document.getElementById('sendMessageBtn');

        // 監(jiān)聽按鈕點(diǎn)擊事件
        sendMessageBtn.addEventListener('click', function() {
            // 獲取目標(biāo)窗口的引用
            const targetWindow = window.parent.frames['page2-frame'];

            // 向目標(biāo)窗口發(fā)送消息
            targetWindow.postMessage('Hello from Page 1!', 'http://www.example.com/page2.html');
        });
    </script>
</body>
</html>

在page2.html中，我們接收來自page1.html的消息：

<!-- page2.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page 2</title>
</head>
<body>
    <iframe src="http://www.example.com/page1.html" name="page1-frame" id="page1-frame"></iframe>

    <script>
        // 監(jiān)聽來自其他窗口的消息
        window.addEventListener('message', function(event) {
            // 判斷消息來源是否是預(yù)期的域
            if (event.origin === 'http://www.example.com') {
                // 處理收到的消息
                console.log('Received message from Page 1:', event.data);
            }
        });
    </script>
</body>
</html>

page1.html包含一個(gè)按鈕，當(dāng)點(diǎn)擊按鈕時(shí)，會(huì)向page2.html發(fā)送消息。page2.html中通過監(jiān)聽window對(duì)象的message事件來接收來自page1.html的消息，并且只有當(dāng)消息的來源是預(yù)期的域時(shí)才會(huì)處理該消息。

需要注意的是，跨文檔消息傳遞僅在現(xiàn)代瀏覽器中得到支持，且需要發(fā)送消息的窗口或iframe引用以及目標(biāo)窗口的域。以前的IE瀏覽器啥的是不支持的。這種方式較為簡(jiǎn)單，方便初學(xué)者進(jìn)行測(cè)試。

二、還有一種辦法較為復(fù)雜，可以利用代理服務(wù)器，通過在同一域下設(shè)置一個(gè)代理服務(wù)器，將跨域請(qǐng)求發(fā)送到該代理服務(wù)器上，再由代理服務(wù)器轉(zhuǎn)發(fā)請(qǐng)求到目標(biāo)服務(wù)器。這種方法需要在服務(wù)器端實(shí)現(xiàn)代理，但可以繞過瀏覽器的跨域限制。

另外還有兩種較為簡(jiǎn)單的方式也做一下介紹，下面這2種方式是常用的方式了，較為簡(jiǎn)單，

三、JSONP（JSON with Padding）：JSONP是一種利用<script>標(biāo)簽的GET請(qǐng)求實(shí)現(xiàn)跨域數(shù)據(jù)傳輸?shù)募夹g(shù)。它允許從其他域加載數(shù)據(jù)，但只支持GET請(qǐng)求，且需要目標(biāo)服務(wù)器支持返回JavaScript回調(diào)函數(shù)。JSONP的缺點(diǎn)是安全性較低，僅能進(jìn)行GET請(qǐng)求。

四、CORS（Cross-Origin Resource Sharing）：CORS是一種現(xiàn)代的跨域資源共享機(jī)制，它允許服務(wù)器端設(shè)置HTTP頭部，以允許在不同域之間的安全數(shù)據(jù)傳輸。通過在服務(wù)器端配置，可以允許跨域請(qǐng)求發(fā)送和接收數(shù)據(jù)。

五、WebSocket：得利于HTML5技術(shù)的發(fā)展，現(xiàn)在主流瀏覽器的支持，WebSocket是HTML5提供的一種在單個(gè)TCP連接上進(jìn)行全雙工通訊的協(xié)議，它可以與任意域的服務(wù)器進(jìn)行通訊，但需要服務(wù)器端支持WebSocket協(xié)議。

在客戶端，我們可以使用JavaScript來創(chuàng)建WebSocket連接：

// 客戶端代碼
const socket = new WebSocket('ws://example.com:8080'); // 替換為實(shí)際的WebSocket服務(wù)器地址

// 當(dāng)WebSocket連接成功建立時(shí)觸發(fā)
socket.onopen = function(event) {
    console.log('WebSocket連接已建立');
    
    // 向服務(wù)器發(fā)送數(shù)據(jù)
    socket.send('Hello from client!');
};

// 當(dāng)接收到來自服務(wù)器的消息時(shí)觸發(fā)
socket.onmessage = function(event) {
    console.log('Received message from server:', event.data);
};

// 當(dāng)發(fā)生錯(cuò)誤時(shí)觸發(fā)
socket.onerror = function(error) {
    console.error('WebSocket發(fā)生錯(cuò)誤:', error);
};

// 當(dāng)WebSocket連接關(guān)閉時(shí)觸發(fā)
socket.onclose = function(event) {
    console.log('WebSocket連接已關(guān)閉');
};

在服務(wù)器端，您需要使用相應(yīng)的語(yǔ)言和框架來創(chuàng)建WebSocket服務(wù)器。以下是一個(gè)簡(jiǎn)單的Node.js示例：

在線咨詢

上一篇：JavaScript this關(guān)鍵字：為何如此關(guān)鍵？如何正確綁定？
下一篇：認(rèn)識(shí) HTML5

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML與CSS的鏈接方式分類

說明

使用環(huán)境

html頁(yè)面調(diào)用vue頁(yè)面中uni的API

您的項(xiàng)目需求