整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

HTML与CSS的链接方式分类

.行内式

直接在标签后面添加该标签的属性值

例如:

<table bgcolor="black" cellspacing="1px" width="600">

二.嵌入式

在title标签后添加<style type="text/css"></style>

注意:需要将样式放入<head></head>中

例如:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

body{

background-color: antiquewhite;

}

p{

background-color: aqua;

}

</style>

</head>

<body>

<h1>CSS使用规则</h1>

<p>CSS使用规则/p>

</body>

三.导入式

创建css样式表如mystyle.css,再在HTML中链接此mystyle.css样式表。

<style type="text/css">


@import"mystyle.css"


</style>

四.链接式

创建css样式表如style.css,再在HTML中链接此style.css样式表。

<link rel="stylesheet" type="text/css" href="style.css">

例如:

HTML例子:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<link rel="stylesheet" type="text/css" href="style.css">

</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示例: