整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
覽網(wǎng)頁時(shí)，當(dāng)從A頁面點(diǎn)擊跳轉(zhuǎn)到B頁面后，一般情況下，可以點(diǎn)擊瀏覽器上的“后退”按鈕返回A頁面。
如果進(jìn)入B頁面后，B頁面想讓訪問者留下，禁止返回，是否可以實(shí)現(xiàn)呢？
這簡直是要控制瀏覽器的行為，雖然有些邪惡，但確實(shí)可以實(shí)現(xiàn)，使用特殊的JavaScript代碼就可實(shí)現(xiàn)。
方法如下：
監(jiān)聽瀏覽器的popstate事件，該事件會(huì)在用戶點(diǎn)擊瀏覽器的回退按鈕時(shí)被觸發(fā)。
然后，使用History.pushState()方法向當(dāng)前瀏覽器會(huì)話的歷史堆棧中添加一個(gè)陷阱狀態(tài)，該狀態(tài)會(huì)使“回退”操作無效。
<script>
//瀏覽器返回鍵事件
pushHistory();
window.addEventListener("popstate", function(e) {
//判斷移動(dòng)端
var userAgentInfo = navigator.userAgent;
var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");
var equipmentType = false;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) != -1) {
equipmentType = true;
break;
}
}
if (equipmentType) {
$("#mask-back").show();
$("#mask-back .back-close").on("click", function() {
$("#mask-back").hide();
})
}
pushHistory(); //注，此處調(diào)用，可以讓用戶一直停留著這個(gè)頁面
}, false);
function pushHistory() {
var stateeee = {
title: "title",
url: "#"
};
window.history.pushState(stateeee, "title", "#");
}
</script>
建立兩個(gè)文件：a.html、b.html。
a文件內(nèi)容簡單寫一句代碼：
<a href="b.html">goto b.html</a>。
b文件內(nèi)容寫入上面的源碼。
打開a頁面，點(diǎn)擊鏈接進(jìn)入b頁面，這時(shí)再點(diǎn)擊瀏覽器上的“后退”按鈕，會(huì)發(fā)現(xiàn)：操作無效，無法后退。
這個(gè)黑暗的技巧，雖然使用了不常見的技術(shù)方法，但查看頁面源碼很容易發(fā)現(xiàn)其實(shí)現(xiàn)原理。
為了保護(hù)代碼、防止代碼被分析，可以對(duì)上面的JavaScript代碼加密，加密使用JShaman。
進(jìn)入JShaman官網(wǎng)，貼入代碼：
在配置中，勾選“字符串加密”：
然后生成混淆加密的JavaScript代碼：
復(fù)制粘貼回b文件：
這時(shí)，代碼成為加密狀態(tài)，雖然不影響運(yùn)行，是萬萬不可能了。
為圍繞 Servo 開源網(wǎng)絡(luò)引擎并使其可用于嵌入式目的的新努力的一部分，Servo 引擎在最近幾周內(nèi)增加了許多新功能。在過去的一個(gè)月里，Servo 增加了更多的功能，包括最終支持"text-align: justify"以及 text-align-last、line-height 和 vertical-align 屬性。
此外，新的布局引擎還開始支持粘貼定位和表格。此外，Servo 正在從浮點(diǎn)坐標(biāo)轉(zhuǎn)向定點(diǎn)坐標(biāo)。
此外，Servo 還更新了 WebGPU、GStreamer 和 ANGLE 庫。
同時(shí)，Servo 的基本示例 Web 瀏覽器現(xiàn)已支持......后退和前進(jìn)按鈕：
此外，Linux 基金會(huì)歐洲利益相關(guān)者和 Igalia 等人還對(duì)代碼進(jìn)行了穩(wěn)定性改進(jìn)、崩潰修復(fù)和其他一般修復(fù)。
有關(guān) Servo 改進(jìn)的更多詳情，請(qǐng)?jiān)L問Servo.org 博客。
當(dāng)用戶進(jìn)行鼠標(biāo)框選選擇了頁面上的內(nèi)容時(shí)，把選擇的內(nèi)容進(jìn)行上報(bào)。
雖然這需求就一句話的事，但是很顯然，沒那么簡單...
因?yàn)槭髽?biāo)框選說起來簡單，就是選擇的內(nèi)容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內(nèi)容選擇、iframe、等。
簡單總結(jié)，分為以下幾點(diǎn)：
鼠標(biāo)框選包含以下幾點(diǎn)：
老生常談的技術(shù)點(diǎn)了，這里不能用節(jié)流，因?yàn)榭隙ú荒苣闶髽?biāo)選擇的時(shí)候，隔一段時(shí)間返回一段內(nèi)容，肯定是選擇之后一起返回。
這里用 debounce 主要也是用在事件監(jiān)聽和事件處理上。
事件監(jiān)聽，因?yàn)槭髽?biāo)選擇，不僅僅是鼠標(biāo)按下到鼠標(biāo)抬起，還包括雙擊、右鍵、全選。
需要使用事件監(jiān)聽對(duì)事件作處理。
Range 接口表示一個(gè)包含節(jié)點(diǎn)與文本節(jié)點(diǎn)的一部分的文檔片段。
Range 是瀏覽器原生的對(duì)象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 創(chuàng)建 Range 對(duì)象
const range = new Range()
const liDoms = document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 結(jié)束位置在 li 3
range.setEndAfter(liDoms[2]);
// 獲取 selection 對(duì)象
const selection = window.getSelection();
// 添加光標(biāo)選擇的范圍
selection.addRange(range);
</script>可以看到，選擇內(nèi)容為第二行和第三行
只選擇 li 中的 itePres
可以看出 range 屬性對(duì)應(yīng)的值
const range = document.createRange();const range = window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}const range = new Range()Selection 對(duì)象表示用戶選擇的文本范圍或插入符號(hào)的當(dāng)前位置。它代表頁面中的文本選區(qū)，可能橫跨多個(gè)元素。
window.getSelection()錨指的是一個(gè)選區(qū)的起始點(diǎn)（不同于 HTML 中的錨點(diǎn)鏈接）。當(dāng)我們使用鼠標(biāo)框選一個(gè)區(qū)域的時(shí)候，錨點(diǎn)就是我們鼠標(biāo)按下瞬間的那個(gè)點(diǎn)。在用戶拖動(dòng)鼠標(biāo)時(shí)，錨點(diǎn)是不會(huì)變的。
選區(qū)的焦點(diǎn)是該選區(qū)的終點(diǎn)，當(dāng)你用鼠標(biāo)框選一個(gè)選區(qū)的時(shí)候，焦點(diǎn)是你的鼠標(biāo)松開瞬間所記錄的那個(gè)點(diǎn)。隨著用戶拖動(dòng)鼠標(biāo)，焦點(diǎn)的位置會(huì)隨著改變。
范圍指的是文檔中連續(xù)的一部分。一個(gè)范圍包括整個(gè)節(jié)點(diǎn)，也可以包含節(jié)點(diǎn)的一部分，例如文本節(jié)點(diǎn)的一部分。用戶通常下只能選擇一個(gè)范圍，但是有的時(shí)候用戶也有可能選擇多個(gè)范圍。
一個(gè)用戶可編輯的元素（例如一個(gè)使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。
首先要清楚，選擇的起點(diǎn)稱為錨點(diǎn)(anchor)，終點(diǎn)稱為焦點(diǎn)(focus)。
function debounce (fn, time = 500) {
let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
timeout = setTimeout(() => { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函數(shù)類型
*/
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
* debounce 防抖函數(shù)
* @param {Function} func 函數(shù)
* @param {number} wait 等待時(shí)間
* @param {false} immediate 是否立即執(zhí)行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[]) => any>(
func: F,
wait = 500,
immediate = false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context = this
const later = function () {
timeout = null
if (!immediate) {
func.apply(context, args)
}
}
const callNow = immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 獲取選擇的內(nèi)容
* @returns {null | IGetSelectContentProps} 返回選擇的內(nèi)容
*/
const getSelectContent = (): null | IGetSelectContentProps => {
const selection = window.getSelection()
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0)
// 獲取選擇內(nèi)容
const rangeClone = range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
// 創(chuàng)建 div 標(biāo)簽
const container = document.createElement('div')
// div 標(biāo)簽 append 復(fù)制節(jié)點(diǎn)
container.appendChild(rangeClone)
// 如果復(fù)制的內(nèi)容長度為 0
if (!selection.toString().trim().length) {
// 判斷是否有選擇特殊節(jié)點(diǎn)
const isSpNode = hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判斷是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode = (parent: Element): boolean => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 獲取框選的文案內(nèi)容
* @returns {string} 返回框選的內(nèi)容
*/
const getSelectTextContent = (): string => {
const selection = window.getSelection()
return selection?.toString().trim() || ''
}// 是否時(shí)鼠標(biāo)點(diǎn)擊動(dòng)作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
console.log('selectContent', selectContent)
// todo... 處理上報(bào)
selectionchangeMouseTrack = false
})
// 添加 mousedown 監(jiān)聽事件
document.addEventListener('mousedown', () => {
selectionchangeMouseTrack = true
})
// 添加 mouseup 監(jiān)聽事件
document.addEventListener(
'mouseup',
debounce(() => {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 監(jiān)聽事件
document.addEventListener(
'selectionchange',
debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 監(jiān)聽事件
document.addEventListener('dblclick', () => {
selectionChangeFun()
})
// 添加 contextmenu 監(jiān)聽事件
document.addEventListener(
'contextmenu',
debounce(() => {
selectionChangeFun()
})
)也可以進(jìn)行封裝
/**
* addEventlistener function 類型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
// 鼠標(biāo) down 事件
mousedown: () => {
selectionchangeMouseTrack = true
},
// 鼠標(biāo) up 事件
mouseup: debounce(() => selectionChangeFun(), 100),
// 選擇事件
selectionchange: debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 雙擊事件
dblclick: () => selectionChangeFun(),
// 右鍵事件
contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time = 500) {
let timeout = null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
timeout = setTimeout(() => { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
selectionchangeMouseTrack = true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
selectionChangeFun()
}))
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
selectionchangeMouseTrack = false
console.log('selectContent', selectContent)
})
const getSelectContent = () => {
const selection = window.getSelection();
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 獲取選擇范圍
const range = selection.getRangeAt(0);
// 獲取選擇內(nèi)容
const rangeClone = range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
const container = document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode = getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode = (parent) => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
