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

Question

I have two iframes in my html page. 我的html页面中有两个iframe。 First i do some text selection in iframe1 and then i move to iframe2 and do some text selection. 首先，我在iframe1中进行一些文本选择，然后移动到iframe2并进行一些文本选择。 Problem is when i do text selection in iframe2, highlighted text in iframe1 highlighted background should be removed but this is not happening. 问题是当我在iframe2中进行文本选择时，iframe1突出显示的背景中突出显示的文本应该被删除，但这不会发生。 How to do this 这该怎么做

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

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

Answer 1

There may be an easier way to do this. 可能有一种更简单的方法可以做到这一点。 But this was what I came up with. 但这就是我提出的。 In theory, it should work: 理论上，它应该工作：

So to clear selection, this is one of the ways: 所以要明确选择，这是方法之一：

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();
     }
}

source: Clear Text Selection with JavaScript 来源：使用JavaScript清除文本选择

Now we are required to trigger this function for all other iframes except the one that has been made active, when the iframe is clicked, or any text selection has been made in it. 现在我们需要为所有其他iframe触发此功能，除了已激活的iframe，单击iframe或已在其中进行任何文本选择。

This requires communicating between iframes, which is what complicates it slightly. 这需要在iframe之间进行通信，这使其稍微复杂化。

Inside each Iframe, put a function that goes like: 在每个Iframe中，放置一个类似于的函数：

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

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

Now subscribe to these messages in the parent frame like this: 现在在父框架中订阅这些消息，如下所示：

//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", "*");
    }

};

I got the references to the child iframes using window.top.frames (to access the top window object) or window.parent.frames (to access the direct parent window object, while there may be other higher-level ancestors) [ source: How do I postMessage to a sibling iFrame ] 我使用window.top.frames （访问顶部窗口对象）或window.parent.frames （访问直接父窗口对象，同时可能有其他更高级别的祖先）获得对子iframe的引用[来源：我如何将消息发送到兄弟iFrame ]

Now, again, in the children frames, subscribe to the message "clearSelection" like so: 现在，再次，在子帧中，订阅消息“clearSelection”，如下所示：

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

There may be a more straightforward way, but this is the best I could do. 可能有一种更直接的方式，但这是我能做的最好的方法。 Hope this helps. 希望这可以帮助。

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

问题描述

1 个解决方案

解决方案1
0 2015-12-08 07:08:44

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

问题描述

1 个解决方案

解决方案1 0 2015-12-08 07:08:44

解决方案1
0 2015-12-08 07:08:44