WebView.InvokeScriptAsync not working in universal app

Question

WebView.InvokeScriptAsync not working in universal app

I am using a webview to display a certain html file, However, when I call InvokeScriptAsync, I keep encountering the error. "Unknown name. (Exception from HRESULT: 0x80020006 (DISP_E_UNKNOWNNAME))". This occurs eventhough the script is called in NavigationComplete or DOMContentLoaded.

I prepared a simple app to debug this problem and I noticed that when the script is in a separate .js file, the error occurs. But if it is placed in the html file, the error would not occur.

I am hoping to have the script in a separate file since I have a quite a lot of functions to implement and I would be using some third party scripts so it would not be maintainable having all the scripts on the html file.

BTW, I did try the same code in a non-universal app and just used Windows 8.1 store app and it would work correctly even with the script stored in a separate file. That is why there must be some setting I am missing to make this work in a universal app.

This is my MainPage code:

public sealed partial class MainPage : Page

{

    public MainPage()
    {
        this.InitializeComponent();
        MapWebView.NavigationCompleted +=MapWebView_NavigationCompleted;
    }

    protected override void OnNavigatedTo(NavigationEventArgs e)
    {
            Uri url = new Uri("ms-appx-web:///Common/Web/SamplePage.html");
            MapWebView.Navigate(url);
    }

    private async void MapWebView_NavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs args)
    {
        try
        {
             await MapWebView.InvokeScriptAsync("SayHello", new string[] { "Hello! This is a test parameter" });
        }
        catch(Exception e)
        {
            string error = e.Message;
        }
    }
}

NOT WORKING (script is in a separate file which is sample.js): html file:

<!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="sample.js"></script>
        <p>Parameter From Script File:</p> <div id="paramDiv"></div>
    </body>
    </html>

sample.js file:

function SayHello(parameter) 
{
    document.getElementById('paramDiv').innerHTML = parameter;
}

WORKING (script is in the html file):

<!DOCTYPE html>

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script>
            function SayHello(parameter) {
                document.getElementById('paramDiv').innerHTML = parameter;
            }
        </script>
        <p>Parameter From Script File:</p> <div id="paramDiv"></div>
    </body>
    </html>

Here is the setup of my project: I have my project setup as a universal app. In the shared code part of the universal app, I have the following files

Common (folder)
- Web
  - SamplePage.html
  - sample.js

javascript

c#

windows-8.1

win-universal-app

asked on Stack Overflow Nov 18, 2014 by

gian • edited Feb 11, 2019 by

Flimzy

1 Answer

I found the solution to this problem after wasting my whole day on it. It is caused by incorrect tagging of javascript files in *.Shared.projitem.

The javascript files are tagged as NONE in the ItemGroup which seems to cause it not being found. To make it visible to the project, change it to Content.

 <ItemGroup>
    <None Include="$(MSBuildThisFileDirectory)Common\Web\sample.js" />
 </ItemGroup>

Kindly refer to this link where I also posted the solution. https://social.msdn.microsoft.com/Forums/windowsapps/en-US/b29feddb-ae39-4580-9114-43839aabbcf2/webviewinvokescriptasync-not-working-in-universal-app?forum=winappswithcsharp

answered on Stack Overflow Nov 19, 2014 by

gian

User contributions licensed under CC BY-SA 3.0