Question

我的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>

Answer 1

可能有一种更简单的方法可以做到这一点。但这就是我提出的。从理论上讲，它应该有效：

因此，要明确选择，这是其中一种方式：

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（访问直接父窗口对象，而可能有其他更高级别的祖先）获得对子iframe的引用 [来源：How do I postMessage to a sibling iFrame]

现在，再次，在子框架中，订阅消息＆＃34; clearSelection＆＃34;像这样：

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

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

如何清除iframe内部选择的亮点

1 个答案: