html - Preventing CTRL + F from searching the content of iframes - Stack Overflow

admin管理员组

文章数量:1344931

I have this page with a lot of text and multiple Google sheets embedded inside iframes.

When I search for something using CTRL + F it brings up like 35 results and only 3 of them are from my text (the intended search target), all the rest are from inside the embedded sheets.

So is there anything I can do to make it so that when anyone uses CTRL + F on this page it only includes results from the body (paragraphs, headers, etc...) while excluding anything inside an iframe?

I have this page with a lot of text and multiple Google sheets embedded inside iframes.

When I search for something using CTRL + F it brings up like 35 results and only 3 of them are from my text (the intended search target), all the rest are from inside the embedded sheets.

So is there anything I can do to make it so that when anyone uses CTRL + F on this page it only includes results from the body (paragraphs, headers, etc...) while excluding anything inside an iframe?

• html
• google-chrome
• search
• iframe
• ctrl

Share Improve this question Follow edited 21 hours ago David Bradshaw 13.1k33 gold badges4545 silver badges7575 bronze badges asked yesterday SamSam 25511 gold badge55 silver badges1515 bronze badges 1

• Is the iframe supposed to allow user interaction? Otherwise you might want to use the inert-attribute if it's just displaying some content or use css to prevent user selection (which may or may not affect the search function in the browser, I didn't test that out) – Psi Commented 20 hours ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

You can't directly change the behaviour of CTRL+F in browsers. If you need to limit search results to just your main document content, you'll have to build your own search function. For example, you can use a TreeWalker to traverse only text nodes outside iframes. I actually wrote something alike some time back, here it is. You can then bookmark the script and click on it instead of using CTRL+F

The Code:

(function(){
  if (document.getElementById("customSearchToolbar")) return;
  
  var toolbar = document.createElement("div");
  toolbar.id = "customSearchToolbar";
  toolbar.style.position = "fixed";
  toolbar.style.top = "10px";
  toolbar.style.right = "10px";
  toolbar.style.backgroundColor = "#f9f9f9";
  toolbar.style.border = "1px solid #ccc";
  toolbar.style.padding = "10px";
  toolbar.style.zIndex = "9999";
  toolbar.innerHTML = '<input type="text" id="customSearchInput" placeholder="Search text..." style="width: 200px;"/>' +
                      '<button id="customSearchPrev">Prev</button>' +
                      '<button id="customSearchNext">Next</button>' +
                      '<button id="customSearchClose">Close</button>';
  document.body.appendChild(toolbar);
  
  var searchResults = [];
  var currentIndex = -1;
  
  function clearHighlights() {
    var highlights = document.querySelectorAll("span.custom-search-highlight");
    highlights.forEach(function(span){
      span.outerHTML = span.innerHTML;
    });
    searchResults = [];
    currentIndex = -1;
  }
  
  function highlightMatches(searchTerm) {
    var regex = new RegExp(searchTerm, "gi");
    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);
    var nodes = [];
    var node = walker.nextNode();
    while (node) {
      if (!node.parentElement.closest("iframe") && regex.test(node.nodeValue)) {
        nodes.push(node);
      }
      node = walker.nextNode();
    }
    nodes.forEach(function(node){
      var matches = [];
      var m;
      regex.lastIndex = 0;
      while (m = regex.exec(node.nodeValue)) {
        matches.push({start: m.index, end: m.index + m[0].length});
      }
      for (var i = matches.length - 1; i >= 0; i--) {
        var range = document.createRange();
        range.setStart(node, matches[i].start);
        range.setEnd(node, matches[i].end);
        var span = document.createElement("span");
        span.className = "custom-search-highlight";
        span.style.backgroundColor = "yellow";
        range.surroundContents(span);
        searchResults.push(span);
      }
    });
  }
  
  function scrollToResult(index) {
    if (searchResults.length > 0) {
      searchResults.forEach(function(el){
        el.style.outline = "";
      });
      var el = searchResults[index];
      el.style.outline = "2px solid orange";
      el.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  }
  
  document.getElementById("customSearchInput").addEventListener("keydown", function(e){
    if (e.key === "Enter") {
      clearHighlights();
      var term = this.value.trim();
      if (term !== "") {
        highlightMatches(term);
        if (searchResults.length > 0) {
          currentIndex = 0;
          scrollToResult(currentIndex);
        } else {
          alert("No matches found");
        }
      }
    }
  });
  
  document.getElementById("customSearchNext").addEventListener("click", function(){
    if (searchResults.length > 0) {
      currentIndex = (currentIndex + 1) % searchResults.length;
      scrollToResult(currentIndex);
    }
  });
  
  document.getElementById("customSearchPrev").addEventListener("click", function(){
    if (searchResults.length > 0) {
      currentIndex = (currentIndex - 1 + searchResults.length) % searchResults.length;
      scrollToResult(currentIndex);
    }
  });
  
  document.getElementById("customSearchClose").addEventListener("click", function(){
    clearHighlights();
    var toolbarEl = document.getElementById("customSearchToolbar");
    if (toolbarEl) toolbarEl.remove();
  });
})();

You can put the following text as a bookmark and then press on it whenever you need to search for something:

javascript:(function(){  if (document.getElementById("customSearchToolbar")) return;    var toolbar = document.createElement("div");  toolbar.id = "customSearchToolbar";  toolbar.style.position = "fixed";  toolbar.style.top = "10px";  toolbar.style.right = "10px";  toolbar.style.backgroundColor = "#f9f9f9";  toolbar.style.border = "1px solid #ccc";  toolbar.style.padding = "10px";  toolbar.style.zIndex = "9999";  toolbar.innerHTML = '<input type="text" id="customSearchInput" placeholder="Search text..." style="width: 200px;"/>' +                      '<button id="customSearchPrev">Prev</button>' +                      '<button id="customSearchNext">Next</button>' +                      '<button id="customSearchClose">Close</button>';  document.body.appendChild(toolbar);    var searchResults = [];  var currentIndex = -1;    function clearHighlights() {    var highlights = document.querySelectorAll("span.custom-search-highlight");    highlights.forEach(function(span){      span.outerHTML = span.innerHTML;    });    searchResults = [];    currentIndex = -1;  }    function highlightMatches(searchTerm) {    var regex = new RegExp(searchTerm, "gi");    var walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, null, false);    var nodes = [];    var node = walker.nextNode();    while (node) {      if (!node.parentElement.closest("iframe") && regex.test(node.nodeValue)) {        nodes.push(node);      }      node = walker.nextNode();    }    nodes.forEach(function(node){      var matches = [];      var m;      regex.lastIndex = 0;      while (m = regex.exec(node.nodeValue)) {        matches.push({start: m.index, end: m.index + m[0].length});      }      for (var i = matches.length - 1; i >= 0; i--) {        var range = document.createRange();        range.setStart(node, matches[i].start);        range.setEnd(node, matches[i].end);        var span = document.createElement("span");        span.className = "custom-search-highlight";        span.style.backgroundColor = "yellow";        range.surroundContents(span);        searchResults.push(span);      }    });  }    function scrollToResult(index) {    if (searchResults.length > 0) {      searchResults.forEach(function(el){        el.style.outline = "";      });      var el = searchResults[index];      el.style.outline = "2px solid orange";      el.scrollIntoView({ behavior: "smooth", block: "center" });    }  }    document.getElementById("customSearchInput").addEventListener("keydown", function(e){    if (e.key === "Enter") {      clearHighlights();      var term = this.value.trim();      if (term !== "") {        highlightMatches(term);        if (searchResults.length > 0) {          currentIndex = 0;          scrollToResult(currentIndex);        } else {          alert("No matches found");        }      }    }  });    document.getElementById("customSearchNext").addEventListener("click", function(){    if (searchResults.length > 0) {      currentIndex = (currentIndex + 1) % searchResults.length;      scrollToResult(currentIndex);    }  });    document.getElementById("customSearchPrev").addEventListener("click", function(){    if (searchResults.length > 0) {      currentIndex = (currentIndex - 1 + searchResults.length) % searchResults.length;      scrollToResult(currentIndex);    }  });    document.getElementById("customSearchClose").addEventListener("click", function(){    clearHighlights();    var toolbarEl = document.getElementById("customSearchToolbar");    if (toolbarEl) toolbarEl.remove();  });})();

本文标签： htmlPreventing CTRLF from searching the content of iframesStack Overflow