在 WebView UWP 中调用 Javascript答案

【问题标题】：Invoke Javascript inside WebView UWP在 WebView UWP 中调用 Javascript
【发布时间】：2020-11-16 21:30:40
【问题描述】：

我想将以下内容添加到我的网页视图中

    <html>
<body>
<h1>My First Heading</h1>
 <div id="mydiv" style="width: 100%; height: 100%;" ></div> 
    <script src="https://mydomain/Embed.js" type="text/Javascript">
        </script>
</body>
</html>

我的代码是这样的

 <WebView x:Name="wView"></WebView>

后面的代码

wView.NavigateToString(
            @"<html> <body> <h1>My First Heading</h1> <div id=""mydiv"" style=""width: 100%; height: 100%;"" ></div> <script src=""https://mydomain/Embed.js"" type=""text/Javascript""> </script> </body> </html>");

使用这种方法，我无法在 Embed.js 中运行任何 javascript。仅显示 H1 标记内的内容。如何确保 webview 中的 javascript（在我的例子中是 Embed.js）被执行？

【问题讨论】：

标签： webview uwp

【解决方案1】：

根据WebView.NavigateToString()的描述：

NavigateToString 支持引用外部文件（如 CSS、脚本、图像和字体）的内容。但是，它不提供以编程方式生成或提供这些资源的方法。

因此，让js生效的一个更好的方法是在项目中创建一个HTML文件，将你的HTML内容写入其中，并在如下方法中使用：

wView.Source = new Uri("ms-appx-web:///Html/myHtmlFile.html");

更新

如果需要动态修改HTML文件的内容，那么ms-appx-web是不合适的，因为它是指向包内的文件，而包内的文件不能在运行时直接修改。

根据this document。您可以将LocalFolder的子文件夹中的html文本保存为临时文件并引导它通过ms-appdata：

var htmlFolder = await ApplicationData.Current.LocalFolder.CreateFolderAsync("html", CreationCollisionOption.OpenIfExists);
var localFile = await htmlFolder.CreateFileAsync("temp.html", CreationCollisionOption.ReplaceExisting);
await FileIO.WriteTextAsync(localFile, html);
wView.Navigate(new Uri("ms-appdata:///local/html/temp.html"));

附注临时文件必须存放在LocalFolder的子文件夹中，不能有同级的链接

【讨论】：

在我的场景中，我必须在 HTML 中嵌入一些动态内容，因此我无法将其保存为 HTML。如果我每次在加载 webview 之前都执行 ao，我必须以编程方式更改 HTML 文件的内容，这不是正确的方法。还有其他方法可以实现吗？
您好，我的答案已修改，请查收。