我怎样才能得到图像src？

Question

我在 Windows 表单上使用 WebView2。我想从 html 获取该图像 src 并将其显示在 MessageBox

<div class="col-sm-6" style="z-index:900;padding:0">
<img id="imageCodeDisplayId" width="180" height="50" ng-src="mysite.com/wp-content/uploads/img.jpg" alt="Verify Image" style="padding:2px;border-style:solid;border-width:1px;border-color:#CCC;margin-top:5px;margin-bottom:5px" src="mysite.com/wp-content/uploads/img.jpg">
<a class="glyphicon glyphicon-repeat" aria-hidden="true" title="Reload" style="cursor:pointer;font-size:30px;top:10px;left:10px;text-decoration:none" ng-click="getCaptcha()"></a>
</div>

Answer 1

JavaScript 可以使用主机应用程序在运行时将代码注入 WebView2 控件。注入的 JavaScript 适用于所有新的 top-level 文档和任何子框架。注入页面的JavaScript是在一个精确的时间点执行的

您可以使用以下java脚本来select指定img标签的src属性，然后在警报中显示：

alert(document.getElementById('imageCodeDisplayId').attributes['src'].value);

所以在你的 WevView2 中 EnsureHttps 使用类似下面的代码：

void EnsureHttps(object sender, CoreWebView2NavigationStartingEventArgs args)
{
    webView.CoreWebView2
        .ExecuteScriptAsync(@"alert(document.getElementById('imageCodeDisplayId').attributes['src'].value);");
    args.Cancel = true;
}

输出：

所有额外的必要信息都可以在 Get started with WebView2 in WinForms apps

获得

而且 WebView2.ExecuteScriptAsync(String) Method 描述了您需要使用它的所有内容。

Answer 2

您可以使用 document.getElementById('imageCodeDisplayId').src 访问 img 元素的 src 属性。

您可以使用 ExecutScriptAsync() 方法通过 C# 检索值。

给你：

// get the src attribute value
string srcAttributeValue = await webView21.CoreWebView2.ExecuteScriptAsync("document.getElementById('imageCodeDisplayId').src");

// show it in a message box
MessageBox.Show(srcAttributeValue);

我怎样才能得到图像src？

How can I get the image src?

html

javascript

c#

getelementbyid

webview2