Ctrl+f (find) in Chrome app

问题

Is it somehow possible to enable the browser feature Ctrl+F (find in the current view) in a chrome app? I am talking about an app I am writing myself and I am really missing that feature.

回答1:

You can't "enable the browser feature" because a Chrome App window is not a browser. True, it's it's always initially loaded from an HTML file, but that doesn't make it a browser. What you have to do is set a handler for the keyboard event (a technique not unique to Chrome Apps) and then in that handler do what you want. You can process the DOM representing the contents of the window to search for something if you like, but this is entirely up to your own JavaScript coding.

回答2:

I thought an example might be nice. I wanted this too. Here is what I came up with from the ideas above. I edited the Kiosk App sample from Google with these changes:

HTML: enter code here

CSS:

#live-search{
  display:none;
}
.text-input{
  right: 25px;
  z-index: 10000;
  position: absolute;
  border: #000 solid 1px;
}

JS:

window.onresize = doLayout;
var isLoading = false;
var webview //made global so that I can access it easier everywhere.
onload = function() {//existing function, added more to it.

  webview = document.querySelector('webview');
  webview.addEventListener('consolemessage', function(e) {

//this lets the webview send to the console so that I can see why something doesn't work. console.log('Guest page log at '+ e.line + ", ", e.message); }); doLayout(); $().ready(function()//using jquery onload here. { var ctrlDown = false; var ctrlKey = 17, fKey = 70;

    $(document).keydown(function(e)//detect CTRL key.
    {
        if (e.keyCode == ctrlKey) ctrlDown = true;
    }).keyup(function(e)
    {
        if (e.keyCode == ctrlKey) ctrlDown = false;
    });

    $(document).keydown(function(e)//detect CTRL+f
    {
        if (ctrlDown && e.keyCode == fKey){
          $("#live-search .text-input").val("").focus();//clear search box
          $("#live-search").toggle();
        };
    });
    $("#live-search .text-input").keyup(function(e){//typed in search, so search.
      webview.executeScript(
        {code:   
          'window.find("'+ $("#live-search .text-input")[0].value +'",false, false, true);'
        });
    });
});

JS in one other function :

function handleLoadStop(event) {//hide the search when they go to another page.
  $("#live-search").hide();

回答3:

If you are using WebView in your application to embed some page, so you can use this:

var wv = document.querySelector('webview');
wv.executeScript({code: "window.find('Some text',false, false, true);"})

来源：https://stackoverflow.com/questions/27206416/ctrlf-find-in-chrome-app

标签

google-chrome-app