locked
WebView Holding event

    Question

  • I am designing a metro style app for Windows 8. I am attaching to the Holding event on WebView, but that event never get fired. What I am trying to do is when user do a long press on WebView, I want to use WebViewBrush for rendering the underlying page and show some native controls on top of the WebView.

    Also, I want to add the default context menu to WebView we are using. It seems I can select the text in WebView but cannot copy the content.

    I would really appreciate if anyone can help me on these issues.

    Thanks,

    Kapil Goel

    Friday, September 30, 2011 10:26 PM

Answers

  • Hi Kapil.

    First, let me give you some background and then I will give you some secret sauce to do this. Our intent with the WebView control was to provide very basic capabilities with respect to displaying web sites or HTML fragments. We did not intend to provide a control on top of which you could build a comple browsing experience, that is what the Modern Browser is for :).

    Therefore, we have purposely disabled the context menu, are not plumbing up the touch events, etc. or providing direct access to the DOM or its content.

    However, there is a way to do some of this. The WebView has a method called "InvokeScript()" that allows you to run script contained in your loaded document. However, you can use a little trick with the javascript eval() to execute javascript code within the document.

    So, let's say I want to handle the onmspointerdown event so that when the user taps and holds we return the contents of the document. To do this, I would use the following code:

     

            void LoadButton2_Click(object sender, RoutedEventArgs e)
            {
                WebView2.ScriptNotify += new NotifyEventHandler(WebView2_ScriptNotify);
                WebView2.LoadCompleted += new Windows.UI.Xaml.Navigation.LoadCompletedEventHandler(WebView2_LoadCompleted);
    
                //This is a hack due to a bug
                WebView2.Navigate(new Uri("http://www.bing.com"));
    
            }
    
            void WebView2_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
            {
    
                WebView2.InvokeScript("eval", new string[] {"document.onmspointerdown = documentMouseDown; function documentMouseDown(){window.external.notify(document.body.innerHTML);}"});
    
            }
    
            void WebView2_ScriptNotify(object sender, NotifyEventArgs e)
            {
                // documentBody will contain the HTML
                string documentBody = e.Value;
            }
    
    


    window.external.notify() will fire the WebView.ScriptNotify event passing back a string. In this case we simply pass back the HTML. Note the hack that navigates to Bing.com above prior to this operation. This is necessary due to a current bug where it is necessary to force the WebView to be in IE10 mode before script will execute. You can accomplish this by simply navigating to a page that puts the WebView in IE10 mode such as http://www.bing.com.

    Hope that helps.

    Mike Henderlight

    Tuesday, October 4, 2011 6:30 PM

All replies

  • Hi Kapil,

    Thanks for reporting this! We are currently investigating the issue. We'll have a response shortly.

     

    Thanks,

    David Lamb

    Tuesday, October 4, 2011 6:02 PM
    Moderator
  • Hi Kapil.

    First, let me give you some background and then I will give you some secret sauce to do this. Our intent with the WebView control was to provide very basic capabilities with respect to displaying web sites or HTML fragments. We did not intend to provide a control on top of which you could build a comple browsing experience, that is what the Modern Browser is for :).

    Therefore, we have purposely disabled the context menu, are not plumbing up the touch events, etc. or providing direct access to the DOM or its content.

    However, there is a way to do some of this. The WebView has a method called "InvokeScript()" that allows you to run script contained in your loaded document. However, you can use a little trick with the javascript eval() to execute javascript code within the document.

    So, let's say I want to handle the onmspointerdown event so that when the user taps and holds we return the contents of the document. To do this, I would use the following code:

     

            void LoadButton2_Click(object sender, RoutedEventArgs e)
            {
                WebView2.ScriptNotify += new NotifyEventHandler(WebView2_ScriptNotify);
                WebView2.LoadCompleted += new Windows.UI.Xaml.Navigation.LoadCompletedEventHandler(WebView2_LoadCompleted);
    
                //This is a hack due to a bug
                WebView2.Navigate(new Uri("http://www.bing.com"));
    
            }
    
            void WebView2_LoadCompleted(object sender, Windows.UI.Xaml.Navigation.NavigationEventArgs e)
            {
    
                WebView2.InvokeScript("eval", new string[] {"document.onmspointerdown = documentMouseDown; function documentMouseDown(){window.external.notify(document.body.innerHTML);}"});
    
            }
    
            void WebView2_ScriptNotify(object sender, NotifyEventArgs e)
            {
                // documentBody will contain the HTML
                string documentBody = e.Value;
            }
    
    


    window.external.notify() will fire the WebView.ScriptNotify event passing back a string. In this case we simply pass back the HTML. Note the hack that navigates to Bing.com above prior to this operation. This is necessary due to a current bug where it is necessary to force the WebView to be in IE10 mode before script will execute. You can accomplish this by simply navigating to a page that puts the WebView in IE10 mode such as http://www.bing.com.

    Hope that helps.

    Mike Henderlight

    Tuesday, October 4, 2011 6:30 PM
  • Thanks Mike,

    I have tried your solution before, but window.external.notify is not defined on page. That's why I was trying to add an Holding event on WebView. Let me try to follow the instructions you have given me and then let you know if window.external.notify is firing an event to javascript.

    Kapil

     


    Kapil Goel
    Tuesday, October 4, 2011 6:40 PM
  • Hi,

    I understand where you're coming from with limiting the WebView HOWEVER will you at least provide the ability to copy/paste text. That is will you allow the scenario of highlighting some text in the webview for pasting in another app ?!

    The reason I say this is because currently I can highlight text BUT am unable to bring up the context menu for selecting "copy". I know MS have intentionally disabled context menu (as you mentioned) BUT do you know that when a keyboard is attached you can do CTRL-C and do the copy that way ?!

    Are you planning on removing the ability to do ctrl-C for webview? And if not are you planning on at least enabling COPY TEXT from a webview ?!

     

     

     

    Sunday, November 6, 2011 10:12 AM
  • likely story.  Sounds all well and good but I think all the major players are putting a stop to the whole screen scraping thing.  No you cant copy and paste or read DOM because it is not your content to be sharing.  If it is your content then you can use javascsript on the page to accomplish whatever you want.  That's about the size of it from what I see.
    Tuesday, February 7, 2012 9:46 AM