.行内式
直接在标签后面添加该标签的属性值
例如:
<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编译器
引用依赖的文件
在 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示例:
*请认真填写需求信息,我们会在24小时内与您取得联系。