JavaScript黑暗技巧：禁止瀏覽器點擊“后退”

JavaScript黑暗技巧：禁止瀏覽器點擊“后退”按鈕

覽網(wǎng)頁時，當(dāng)從A頁面點擊跳轉(zhuǎn)到B頁面后，一般情況下，可以點擊瀏覽器上的“后退”按鈕返回A頁面。

如果進入B頁面后，B頁面想讓訪問者留下，禁止返回，是否可以實現(xiàn)呢？

這簡直是要控制瀏覽器的行為，雖然有些邪惡，但確實可以實現(xiàn)，使用特殊的JavaScript代碼就可實現(xiàn)。

方法如下：

實現(xiàn)原理：

監(jiān)聽瀏覽器的popstate事件，該事件會在用戶點擊瀏覽器的回退按鈕時被觸發(fā)。

然后，使用History.pushState()方法向當(dāng)前瀏覽器會話的歷史堆棧中添加一個陷阱狀態(tài)，該狀態(tài)會使“回退”操作無效。

JS源碼：

<script>
//瀏覽器返回鍵事件
pushHistory();
window.addEventListener("popstate", function(e) {
//判斷移動端
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)用，可以讓用戶一直停留著這個頁面
}, false);
function pushHistory() {
var stateeee={
title: "title",
url: "#"
};
window.history.pushState(stateeee, "title", "#");
}
</script>

測試方法：

建立兩個文件：a.html、b.html。

a文件內(nèi)容簡單寫一句代碼：

<a href="b.html">goto b.html</a>。

b文件內(nèi)容寫入上面的源碼。

打開a頁面，點擊鏈接進入b頁面，這時再點擊瀏覽器上的“后退”按鈕，會發(fā)現(xiàn)：操作無效，無法后退。

提升強度：

這個黑暗的技巧，雖然使用了不常見的技術(shù)方法，但查看頁面源碼很容易發(fā)現(xiàn)其實現(xiàn)原理。

為了保護代碼、防止代碼被分析，可以對上面的JavaScript代碼加密，加密使用JShaman。

進入JShaman官網(wǎng)，貼入代碼：

在配置中，勾選“字符串加密”：

然后生成混淆加密的JavaScript代碼：

復(fù)制粘貼回b文件：

這時，代碼成為加密狀態(tài)，雖然不影響運行，是萬萬不可能了。

為圍繞 Servo 開源網(wǎng)絡(luò)引擎并使其可用于嵌入式目的的新努力的一部分，Servo 引擎在最近幾周內(nèi)增加了許多新功能。在過去的一個月里，Servo 增加了更多的功能，包括最終支持"text-align: justify"以及 text-align-last、line-height 和 vertical-align 屬性。

此外，新的布局引擎還開始支持粘貼定位和表格。此外，Servo 正在從浮點坐標(biāo)轉(zhuǎn)向定點坐標(biāo)。

此外，Servo 還更新了 WebGPU、GStreamer 和 ANGLE 庫。

同時，Servo 的基本示例 Web 瀏覽器現(xiàn)已支持......后退和前進按鈕：

此外，Linux 基金會歐洲利益相關(guān)者和 Igalia 等人還對代碼進行了穩(wěn)定性改進、崩潰修復(fù)和其他一般修復(fù)。

有關(guān) Servo 改進的更多詳情，請訪問Servo.org 博客。

S 鼠標(biāo)框選（頁面選擇）時返回對應(yīng)的 HTML 或文案內(nèi)容

一、需求背景

1、項目需求

當(dāng)用戶進行鼠標(biāo)框選選擇了頁面上的內(nèi)容時，把選擇的內(nèi)容進行上報。

2、需求解析

雖然這需求就一句話的事，但是很顯然，沒那么簡單...

因為鼠標(biāo)框選說起來簡單，就是選擇的內(nèi)容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內(nèi)容選擇、iframe、等。

簡單總結(jié)，分為以下幾點：

選擇文案時
選擇圖片、svg、iframe、video、audio 等標(biāo)簽時
選擇 input、select、textarea 等標(biāo)簽時
選擇 input、textarea 標(biāo)簽內(nèi)容時
選擇類似字符時
鍵盤全選時
鼠標(biāo)右鍵選擇
以上各模塊結(jié)合時
當(dāng)包含標(biāo)簽的時候，返回 html 結(jié)構(gòu)，只有文本時返回文本內(nèi)容

二、技術(shù)要點

鼠標(biāo)框選包含以下幾點：

debounce 防抖
addEventListener 事件監(jiān)聽
Range 對象
Selection 對象

1、debounce

老生常談的技術(shù)點了，這里不能用節(jié)流，因為肯定不能你鼠標(biāo)選擇的時候，隔一段時間返回一段內(nèi)容，肯定是選擇之后一起返回。

這里用 debounce 主要也是用在事件監(jiān)聽和事件處理上。

【debounce 掘金】
【debounce CSDN】

2、addEventListener

事件監(jiān)聽，因為鼠標(biāo)選擇，不僅僅是鼠標(biāo)按下到鼠標(biāo)抬起，還包括雙擊、右鍵、全選。

需要使用事件監(jiān)聽對事件作處理。

【addEventListener MDN】

3、Range

Range 接口表示一個包含節(jié)點與文本節(jié)點的一部分的文檔片段。

Range 是瀏覽器原生的對象。

3.1. 創(chuàng)建 Range 實例，并設(shè)置起始位置

<body>
  <ul>
    <li>Vite</li>
    <li>Vue</li>
    <li>React</li>
    <li>VitePress</li>
    <li>NaiveUI</li>
  </ul>
</body>
<script>
  // 創(chuàng)建 Range 對象
  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 對象
  const selection=window.getSelection();
  // 添加光標(biāo)選擇的范圍
  selection.addRange(range);
</script>

可以看到，選擇內(nèi)容為第二行和第三行

3.1.1 瀏覽器兼容情況

3.2. Range 屬性

startContainer：起始節(jié)點。
startOffset：起始節(jié)點偏移量。
endContainer：結(jié)束節(jié)點。
endOffset：結(jié)束節(jié)點偏移量。
collapsed：范圍的開始和結(jié)束是否為同一點。
commonAncestorContainer：返回完整包含 startContainer 和 endContainer 的最深一級的節(jié)點。

3.2.1. 用我們上面創(chuàng)建的實例來看下 range 屬性的值

3.2.2. 如果我們只選擇文本內(nèi)容時

只選擇 li 中的 itePres

可以看出 range 屬性對應(yīng)的值

3.3. Range 方法

cloneContents()：復(fù)制范圍內(nèi)容，并將復(fù)制的內(nèi)容作為 DocumentFragment 返回。
cloneRange()：創(chuàng)建一個具有相同起點/終點的新范圍，非引用，可以隨意改變，不會影響另一方。
collapse(toStart)：如果 toStart=true 則設(shè)置 end=start，否則設(shè)置 start=end，從而折疊范圍。
compareBoundaryPoints(how, sourceRange)：兩個范圍邊界點進行比較，返回一個數(shù)字 -1、0、1。
comparePoint(referenceNode, offset)：返回-1、0、1具體取決于是 referenceNode 在之前、相同還是之后。
createContextualFragment(tagString)：返回一個 DocumentFragment。
deleteContents()：刪除框選的內(nèi)容。
extractContents()：從文檔中刪除范圍內(nèi)容，并將刪除的內(nèi)容作為 DocumentFragment 返回。
getBoundingClientRect()：和 dom 一樣，返回 DOMRect 對象。
getClientRects()：返回可迭代的對象序列 DOMRect。
insertNode(node)：在范圍的起始處將 node 插入文檔。
intersectsNode(referenceNode)：判斷與給定的 node 是否相交。
selectNode(node)：設(shè)置范圍以選擇整個 node。
selectNodeContents(node)：設(shè)置范圍以選擇整個 node 的內(nèi)容。
setStart(startNode, startOffset)：設(shè)置起點。
setEnd(endNode, endOffset)：設(shè)置終點。
setStartBefore(node)：將起點設(shè)置在 node 前面。
setStartAfter(node)：將起點設(shè)置在 node 后面。
setEndBefore(node)：將終點設(shè)置為 node 前面。
setEndAfter(node)：將終點設(shè)置為 node 后面。
surroundContents(node)：使用 node 將所選范圍內(nèi)容包裹起來。

3.4. 創(chuàng)建 Range 的方法

3.4.1. Document.createRange

const range=document.createRange();

3.4.2. Selection 的 getRangeAt() 方法

const range=window.getSelection().getRangeAt(0)

3.4.3. caretRangeFromPoint() 方法

if (document.caretRangeFromPoint) {
    range=document.caretRangeFromPoint(e.clientX, e.clientY);
}

3.4.4. Range() 構(gòu)造函數(shù)

const range=new Range()

3.5. Range 兼容性

4、Selection

Selection 對象表示用戶選擇的文本范圍或插入符號的當(dāng)前位置。它代表頁面中的文本選區(qū)，可能橫跨多個元素。

4.1. 獲取文本對象

window.getSelection()

4.2. Selection 術(shù)語

4.2.1. 錨點 (anchor)

錨指的是一個選區(qū)的起始點（不同于 HTML 中的錨點鏈接）。當(dāng)我們使用鼠標(biāo)框選一個區(qū)域的時候，錨點就是我們鼠標(biāo)按下瞬間的那個點。在用戶拖動鼠標(biāo)時，錨點是不會變的。

4.2.2. 焦點 (focus)

選區(qū)的焦點是該選區(qū)的終點，當(dāng)你用鼠標(biāo)框選一個選區(qū)的時候，焦點是你的鼠標(biāo)松開瞬間所記錄的那個點。隨著用戶拖動鼠標(biāo)，焦點的位置會隨著改變。

4.2.3. 范圍 (range)

范圍指的是文檔中連續(xù)的一部分。一個范圍包括整個節(jié)點，也可以包含節(jié)點的一部分，例如文本節(jié)點的一部分。用戶通常下只能選擇一個范圍，但是有的時候用戶也有可能選擇多個范圍。

4.2.4. 可編輯元素 (editing host)

一個用戶可編輯的元素（例如一個使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。

4.3. Selection 的屬性

首先要清楚，選擇的起點稱為錨點(anchor)，終點稱為焦點(focus)。

anchorNode：選擇的起始節(jié)點。
anchorOffset：選擇開始的 anchorNode 中的偏移量。
focusNode：選擇的結(jié)束節(jié)點。
focusOffset：選擇開始處 focusNode 的偏移量。
isCollapsed：如果未選擇任何內(nèi)容（空范圍）或不存在，則為 true。
rangeCount：選擇中的范圍數(shù)，之前說過，除 Firefox 外，其他瀏覽器最多為1。
type：類型：None、Caret、Range

4.4. Selection 方法

addRange(range): 將一個 Range 對象添加到當(dāng)前選區(qū)。
collapse(node, offset): 將選區(qū)折疊到指定的節(jié)點和偏移位置。
collapseToEnd(): 將選區(qū)折疊到當(dāng)前選區(qū)的末尾。
collapseToStart(): 將選區(qū)折疊到當(dāng)前選區(qū)的起始位置。
containsNode(node, partlyContained): 判斷選區(qū)是否包含指定的節(jié)點，可以選擇是否部分包含。
deleteFromDocument(): 從文檔中刪除選區(qū)內(nèi)容。
empty(): 從選區(qū)中移除所有范圍（同 `removeAllRanges()``，已廢棄）。
extend(node, offset): 將選區(qū)的焦點節(jié)點擴展到指定的節(jié)點和偏移位置。
getRangeAt(index): 返回選區(qū)中指定索引處的 Range 對象。
removeAllRanges(): 移除所有選區(qū)中的范圍。
removeRange(range): 從選區(qū)中移除指定的 Range 對象。
selectAllChildren(node): 選中指定節(jié)點的所有子節(jié)點。
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset): 設(shè)置選區(qū)的起始和結(jié)束節(jié)點及偏移位置。
setPosition(node, offset)：collapse 的別名

4.5. Selection 兼容性

三、項目實現(xiàn)

1、實現(xiàn)思路

先獲取選擇的內(nèi)容，開發(fā) getSelectContent 函數(shù)
對獲取的內(nèi)容進行判斷，是否存在 selection 實例，沒有直接返回 null
判斷 selection 實例的 isCollapsed 屬性沒有選中，對 selection 進行 toString().trim() 操作，判斷內(nèi)容有內(nèi)容，直接返回 text 類型無內(nèi)容，返回 null 有選中，則判斷內(nèi)容
判斷選中的內(nèi)容有沒有節(jié)點沒有節(jié)點，則和沒有選中一樣處理，進行 toString().trim() 操作，判斷內(nèi)容有內(nèi)容，直接返回 text 類型無內(nèi)容，返回 null 有節(jié)點，進行 toString().trim() 操作，判斷內(nèi)容沒有內(nèi)容，判斷是否有特殊節(jié)點有 'iframe', 'svg', 'img', 'audio', 'video' 節(jié)點，返回 html 類型有 'input', 'textarea', 'select'，判斷 value 值，是否存在存在：返回 html 類型不存在：返回 null 沒有特殊節(jié)點，返回 null 有內(nèi)容，返回 html 類型
對鼠標(biāo) mousedown、mouseup 事件和 selectionchange、contextmenu、dblclick 事件進行監(jiān)聽，觸發(fā) getSelectContent 函數(shù)
在需要的地方進行 debounce 防抖處理

2、簡易流程圖

2、Debounce 方法實現(xiàn)

2.1. JS

function debounce (fn, time=500) {
  let timeout=null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
  return function () {
    clearTimeout(timeout) // 每當(dāng)觸發(fā)時，把前一個 定時器 clear 掉
    timeout=setTimeout(()=> { // 創(chuàng)建一個新的 定時器，并賦值給 timeout
      fn.apply(this, arguments)
    }, time)
  }
}

2.2. TS

/**
 * debounce 函數(shù)類型
 */
type DebouncedFunction<F extends (...args: any[])=> any>=(...args: Parameters<F>)=> void
/**
 * debounce 防抖函數(shù)
 * @param {Function} func 函數(shù)
 * @param {number} wait 等待時間
 * @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)
    }
  }
}

3、獲取選擇的文本/html 元素

3.1. 獲取文本/html 元素

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. 是焦點在 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é)點
    if (rangeClone.childElementCount > 0) {
      // 創(chuàng)建 div 標(biāo)簽
      const container=document.createElement('div')
      // div 標(biāo)簽 append 復(fù)制節(jié)點
      container.appendChild(rangeClone)
      // 如果復(fù)制的內(nèi)容長度為 0
      if (!selection.toString().trim().length) {
        // 判斷是否有選擇特殊節(jié)點
        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
  })
}

3.2. 只需要文本

/**
 * 獲取框選的文案內(nèi)容
 * @returns {string} 返回框選的內(nèi)容
 */
const getSelectTextContent=(): string=> {
  const selection=window.getSelection()
  return selection?.toString().trim() || ''
}

4、添加事件監(jiān)聽

// 是否時鼠標(biāo)點擊動作
let selectionchangeMouseTrack: boolean=false
const selectionChangeFun=debounce(()=> {
  const selectContent=getSelectContent()
  console.log('selectContent', selectContent)
  // todo... 處理上報
  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()
  })
)

也可以進行封裝

/**
 * 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])
})

5、返回內(nèi)容

5.1. 純文本內(nèi)容

5.2. html 格式

6. 完整 JS 代碼

function debounce (fn, time=500) {
  let timeout=null; // 創(chuàng)建一個標(biāo)記用來存放定時器的返回值
  return function () {
    clearTimeout(timeout) // 每當(dāng)觸發(fā)時，把前一個 定時器 clear 掉
    timeout=setTimeout(()=> { // 創(chuàng)建一個新的 定時器，并賦值給 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. 是焦點在 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é)點
    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
  })
}

四、總結(jié)

鼠標(biāo)框選上報能監(jiān)控用戶在頁面的行為，能為后續(xù)的數(shù)據(jù)分析等提供便利
基于 JS 中的 Selection 和 Range 實現(xiàn)的，使用原生 JS
涉及到的操作比較多，包含鍵盤、鼠標(biāo)右鍵、全選等
能對框選的內(nèi)容進行分類，區(qū)別 html 和 text，更方便的看出用戶選擇了哪些內(nèi)容

在線咨詢

上一篇：SAP-編程語言（ABAP）
下一篇：Apple 「地圖」網(wǎng)頁版推出，Windows 也能

您的項目需求

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

整合營銷服務(wù)商