HTML與CSS的鏈接方式分類

.行內式

直接在標簽后面添加該標簽的屬性值

例如:

二.嵌入式

在title標簽后添加<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使用規則</h1>

<p>CSS使用規則/p>

</body>

三.導入式

創建css樣式表如mystyle.css，再在HTML中鏈接此mystyle.css樣式表。

@import"mystyle.css"

</style>

四.鏈接式

創建css樣式表如style.css，再在HTML中鏈接此style.css樣式表。

例如：

HTML例子：

<!DOCTYPE html>

<head>

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

</head>

<body>

<h1>CSS使用規則</h1>

<p>CSS使用規則/p>

</body>

</html>

CSS例子：

body{

background-color: antiquewhite;

font-size: 17px;

}

結果圖：

五.采用導入式和鏈接式還是有不同的區別的：

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

使用導入式時，會在整個頁面裝載完成后在裝載CSS文件，對于有的瀏覽器來說，在一些情況下，如果網頁文件體積比較大的的時候，則會出現先顯示無樣式的頁面，閃爍一下在出現設置樣式后的效果，對于瀏覽者的感受，這是導入式的一個缺陷。

2.對于一些較大的網站，為了便于維護，可能會希望把所有的CSS樣式分類別放到幾個CSS文件中，如果這樣使用鏈接式引入，就需要幾個語句分別導入CSS文件。如果要調整CSS文件的分類，就需要同時調整HTML文件。這對于維護工作來說，是一個巨大的缺陷。如果使用導入式，則可以只引進一個總的CSS文件，在這個文件中在導入其他獨立的CSS文件；而鏈接式則不具備這個功能。

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

但是，若是希望通過JavaScript來動態決定引入哪個CSS文件，則必須使用鏈接方式才能實現。

說明

最近在項目上有個移動端（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函數。

完整代碼示例：

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

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

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

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

<!-- 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');

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

            // 向目標窗口發送消息
            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>
        // 監聽來自其他窗口的消息
        window.addEventListener('message', function(event) {
            // 判斷消息來源是否是預期的域
            if (event.origin === 'http://www.example.com') {
                // 處理收到的消息
                console.log('Received message from Page 1:', event.data);
            }
        });
    </script>
</body>
</html>

page1.html包含一個按鈕，當點擊按鈕時，會向page2.html發送消息。page2.html中通過監聽window對象的message事件來接收來自page1.html的消息，并且只有當消息的來源是預期的域時才會處理該消息。

需要注意的是，跨文檔消息傳遞僅在現代瀏覽器中得到支持，且需要發送消息的窗口或iframe引用以及目標窗口的域。以前的IE瀏覽器啥的是不支持的。這種方式較為簡單，方便初學者進行測試。

二、還有一種辦法較為復雜，可以利用代理服務器，通過在同一域下設置一個代理服務器，將跨域請求發送到該代理服務器上，再由代理服務器轉發請求到目標服務器。這種方法需要在服務器端實現代理，但可以繞過瀏覽器的跨域限制。

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

三、JSONP（JSON with Padding）：JSONP是一種利用<script>標簽的GET請求實現跨域數據傳輸的技術。它允許從其他域加載數據，但只支持GET請求，且需要目標服務器支持返回JavaScript回調函數。JSONP的缺點是安全性較低，僅能進行GET請求。

四、CORS（Cross-Origin Resource Sharing）：CORS是一種現代的跨域資源共享機制，它允許服務器端設置HTTP頭部，以允許在不同域之間的安全數據傳輸。通過在服務器端配置，可以允許跨域請求發送和接收數據。

五、WebSocket：得利于HTML5技術的發展，現在主流瀏覽器的支持，WebSocket是HTML5提供的一種在單個TCP連接上進行全雙工通訊的協議，它可以與任意域的服務器進行通訊，但需要服務器端支持WebSocket協議。

在客戶端，我們可以使用JavaScript來創建WebSocket連接：

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

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

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

// 當發生錯誤時觸發
socket.onerror = function(error) {
    console.error('WebSocket發生錯誤:', error);
};

// 當WebSocket連接關閉時觸發
socket.onclose = function(event) {
    console.log('WebSocket連接已關閉');
};

在服務器端，您需要使用相應的語言和框架來創建WebSocket服務器。以下是一個簡單的Node.js示例：

在線咨詢

上一篇：JavaScript this關鍵字：為何如此關鍵？如何正確綁定？
下一篇：認識 HTML5

您的項目需求

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

整合營銷服務商

HTML與CSS的鏈接方式分類

說明

使用環境

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

您的項目需求