个人中心
gpt4 book ai didi

javascript - 如何清除iframe中选择的高亮

转载 作者：搜寻专家 更新时间：2023-10-31 21:47:26 25 4
gpt4 key购买 nike

我的 html 页面中有两个 iframe。首先，我在 iframe1 中进行一些文本选择，然后我转到 iframe2 并进行一些文本选择。问题是当我在 iframe2 中进行文本选择时，应该删除 iframe1 中突出显示的背景中突出显示的文本，但这并没有发生。如何做到这一点

    <!doctype html>
<html lang="en">
<head>

</head>
<body>
    <iframe src="test.html"></iframe>
    <iframe src="test2.html"></iframe>
</body>
</html>

最佳答案

可能有更简单的方法来做到这一点。但这是我想出的。理论上，它应该有效:

所以要清除选择，这是其中一种方法:

var clearSelection = function(){ 
     if (window.getSelection) {
         if (window.getSelection().empty) {  // Chrome
             window.getSelection().empty();
         } else if (window.getSelection().removeAllRanges) {  // Firefox
             window.getSelection().removeAllRanges();
         }
     } else if (document.selection) {  // IE?
        document.selection.empty();
     }
}

来源:Clear Text Selection with JavaScript

现在我们需要为所有其他 iframe 触发此函数，除了已激活的 iframe，当 iframe 被单击或在其中进行任何文本选择时。

这需要在 iframe 之间进行通信，这使它稍微复杂一些。

在每个 iframe 中，放置一个如下所示的函数:

//iframe1
document.addEventListener("click", function(){
 window.postMessage({
  "source": "iframe1" 
 }, "*");
})

//iframe2
document.addEventListener("click", function(){
 window.postMessage({
  "source": "iframe2" 
 }, "*");
})

现在像这样在父框架中订阅这些消息:

//parent frame
var childrenFrames = window.parent.frames;
window.onmessage = function(e){
    if (e.data.source === "iframe1") {
        childrenFrames[1].postMessage("clearSelection", "*");
    }
    if (e.data.source === "iframe2") {
        childrenFrames[0].postMessage("clearSelection", "*");
    }

};

我使用 window.top.frames(访问顶部窗口对象)或 window.parent.frames(访问直接父窗口对象，而可能还有其他更高级别的祖先)[来源:How do I postMessage to a sibling iFrame ]

现在，再次在子框架中，像这样订阅消息“clearSelection”:

//iframe1, iframe2
window.onmessage = function(e){
    if(e.data === "clearSelection"){
        clearSelection();  // the method I mentioned in the beginning
    }
}

可能有更直接的方法，但这是我能做的最好的方法。希望这可以帮助。

关于javascript - 如何清除iframe中选择的高亮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34148140/

25 4 0
文章推荐： javascript - 解析html页面后触发点击事件
文章推荐： php - 检测 PHP 字符串中的特定日期类型
文章推荐： php - Laravel beyondcode websockets 不连接
文章推荐： javascript - 如何找出在 Chrome 开发工具中添加样式属性的位置？