locked
Capture right click or keypress event inside webview? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi,

    In my app, I have the page with YouTube video inside webview using this code.

    <x-ms-webview id="video-web-view"></x-ms-webview>

    Video source is insert by JavaScript.

    I also have a button in appbar to take this webview to fullscreen.

    My question is how can I open an appbar using mouse when my webview is fullscreen? Is there anyway to catch right click event and/or keypress button to raise an appbar?

    I've tried webview.onclick and webview.onkeypress and it didn't work.


    Friday, September 5, 2014 11:00 AM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote

    Well, as I mentioned in the first reply, here is a really complex way to implement it, it might spend you plenty much time.

    #1, Look into the HTML code of the Video from youtube, you should be able to see the source code in IE:

    The same, if we want to know the whole HTML code in WinJS, we could use:

    document.getElementById("video-web-view").invokeScriptAsync("eval", "document.documentElement.outerHTML;")

    #2, inject a script code to HTML content by invokeScriptAsync, for instance you could inject a script that can fire with the right mouse click event (contextmenu as I know) and use window.external.notify to pass the message out

    #3, open the app bar manually.

    For more information please ref: App bars, section: Handling the right mouse button

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, September 9, 2014 2:18 AM
    Moderator

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Panupong,

    That is expected, the inner HTML content handle all the click or key press event therefore event cannot be passed to outside webview.

    Let's say if we can receive all the click and key press event at inner HTML content, we can pass them out by window.external.notify and receive the information by MSWebViewScriptNotify event.

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, September 8, 2014 1:20 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    I cannot do anything with HTML content (it's a YouTube video).

    So, my user cannot goes out of fullscreen mode on mouse/keyboard :( ...

    That's too bad.

    Monday, September 8, 2014 4:54 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Yes. Unless you could get a click event or key press event fired somewhere.

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, September 8, 2014 5:08 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Do you have any suggestion about this issue, Jamles?

    I don't want the fullscreen button to stick on page all the time (well, when you watch video you don't want to see anything like that right?) but that's the only solution I can think of now.

    Monday, September 8, 2014 6:28 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    Ok, I still got a question: how do you make the x-ms-webview control full screen? Simply by CSS or other JavaScript code? As I know there does not exist any fullscreen method for x-ms-webview element.

    If the full screen here you mentioned means you modify the CSS of webview, then you don't need to worry about app bar, right click will call out the appbar. Here I use a Microsoft site as test, but I don't know how youtube works, if the solution does not work with you, could you share your code with us?

    <body>
    <div id="appBar"
         data-win-control="WinJS.UI.AppBar"
         data-win-options="{placement:'bottom', layout:'commands'}">
        <button data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'secondary1',
            type:'button',
            label:'Secondary1',
            section:'selection'}"></button>
        <div data-win-control="WinJS.UI.AppBarCommand"
             data-win-options="{ id: 'list',
         type: 'content',
         label:'List',
         section: 'selection'}">
            <select class="options">
                <option>Option1</option>
                <option>Option2</option>
                <option>Option3</option>
                <option>Option4</option>
            </select>
        </div>
        <div data-win-control="WinJS.UI.AppBarCommand"
             data-win-options="{ id: 'textfield',
         type: 'content',
         label:'Text field',
         section: 'selection' }">
            <input type="text" value="Text" />
        </div>
        <button data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'flyoutButton',
            type:'flyout',
            label:'Flyout',
            icon:'openpane',
            section: 'selection',
            flyout:select('#exampleFlyout')}"></button>
        <button data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'cmdToggle',
            type:'toggle',
            label:'Toggle',
            icon:'audio',
            section:'global',
            tooltip:'Toggle'}"></button>
        <hr data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'separator',
        type:'separator',
        section:'global'}" />
        <button data-win-control="WinJS.UI.AppBarCommand"
                data-win-options="{id:'helpButton',
            type: 'button',
            label:'Help',
            tooltip:'Help',
            icon:'help',
            section:'global'
            }"></button>
    </div>

    <x-ms-webview id="video-web-view" style=";top:0;left:0;height:100vh;width:100vw;" src="http://www.microsoft.com"></x-ms-webview>
</body>
    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.


    Monday, September 8, 2014 6:55 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    I'm using CSS for fullscreen mode in my app.

    I tried using microsoft.com as source and found that right click call out an appbar, but that didn't work if you set source to YouTube video.

    You can try using the link below as source for web view to see my problem.

    https://www.youtube.com/embed/CTo5DfBtWkY

    Monday, September 8, 2014 7:50 AM
  • Question
    Sign in to vote
    0
    Sign in to vote

    I cannot figure out how to call out the appbar, seems the youtube content handle the right click event.

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Monday, September 8, 2014 9:25 AM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Well, as I mentioned in the first reply, here is a really complex way to implement it, it might spend you plenty much time.

    #1, Look into the HTML code of the Video from youtube, you should be able to see the source code in IE:

    The same, if we want to know the whole HTML code in WinJS, we could use:

    document.getElementById("video-web-view").invokeScriptAsync("eval", "document.documentElement.outerHTML;")

    #2, inject a script code to HTML content by invokeScriptAsync, for instance you could inject a script that can fire with the right mouse click event (contextmenu as I know) and use window.external.notify to pass the message out

    #3, open the app bar manually.

    For more information please ref: App bars, section: Handling the right mouse button

    --James

    <THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
    Thanks
    MSDN Community Support

    Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

    Tuesday, September 9, 2014 2:18 AM
    Moderator