javascript - google pdf viewer search functionality

Question

I have embedded a google pdf viewer in an iframe on my webpage. I want to build a functionality which will have a text box and a search button which will help in searching the word in the embedded pdf ONLY!.

activating ctrl+f through button click opens the window search functionality in chrome(It does not search words within the embedded pdf).

As I am using google pdf viewer, if I click on the scroll bar and then press ctrl+f then I am able to search using the google pdf viewer's search functionality.

So the main question is, How can I activate google pdf viewers search functionality on button click from outside the iframe.

Thanks

question from:https://stackoverflow.com/questions/65912698/google-pdf-viewer-search-functionality

Answer 1

What you are looking for is window.getSelection() method. This method returns a specific Selection object with the range of the selected text on the web page.

Here is how you can use onselectionchange() together with pdf.js

<script >

  // addEventListener version
  document.addEventListener('selectionchange', () => {
    console.log(document.getSelection());
  });

// onselectionchange version
document.onselectionchange = () => {
  var text = getSelectedText();

  if (text) {
    alert(text);

  }
};

function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  } else if (document.selection) {
    return document.selection.createRange().text;
  }
  return '';
}

</script>