How to get HTML, text, images, or other info from a web page?

3D WebView for Unity provides APIs that your application can use to access a web page's contents. There are two basic approaches:

1. The first approach: use IWebView.ExecuteJavaScript() to run JavaScript and immediately return the result.
2. The second approach: use IWebView.ExecuteJavaScript() or PageLoadScripts to add long-running JavaScript to the page that sends one or more messages to your C# script to pass it the desired info.

For example, here's how an application can use ExecuteJavaScript() to retrieve the HTML for the entire web page:

// Wait until the prefab is initialized to access its WebView
await webViewPrefab.WaitUntilInitialized();
// Wait until the page has loaded to execute JavaScript
await webViewPrefab.WebView.WaitForNextPageLoadToFinish();
var html = await webViewPrefab.WebView.ExecuteJavaScript("document.documentElement.outerHTML");
Debug.Log("HTML: " + html);

However, it's more efficient to retrieve just the HTML or text that you need, so it's generally better to use more targeted JavaScript. For example, here's how an application can retrieve just the text for the first button:

var buttonText = await webViewPrefab.WebView.ExecuteJavaScript("document.getElementsByTagName('button')[0].innerText");
Debug.Log("Button text: " + buttonText);

The following JavaScript APIs are helpful for retrieving specific elements:

• document.getElementById
• document.getElementsByClassName
• document.getElementsByTagName
• document.querySelector
• document.querySelectorAll

To determine the JavaScript needed for your use case, you can use remote debugging to inspect the web page and run JavaScript in its web console.

Accessing images

To get an image from a web page, an application can use JavaScript to obtain the image's URL. Once the application has the image URL, it can download the image or use it to create a texture. Here's an example of obtaining the URL for the first image in the web page:

// Wait until the prefab is initialized to access its WebView
await webViewPrefab.WaitUntilInitialized();
// Wait until the page has loaded to execute JavaScript
await webViewPrefab.WebView.WaitForNextPageLoadToFinish();
// Get the URL for the first image in the web page.
var imageUrl = await webViewPrefab.WebView.ExecuteJavaScript("document.getElementsByTagName('img')[0].currentSrc");
Debug.Log("Image URL: " + imageUrl);

If you want to get the image from specific coordinates on the page, you can do that using document.elementFromPoint(), like this:

// Get the URL of the image at the point (500px, 350px).
Vector2Int pointInPixels = new Vector2Int(500, 350);
var imageUrl = await webViewPrefab.WebView.ExecuteJavaScript($@"
    (function() {{
        const element = document.elementFromPoint({pointInPixels.x}, {pointInPixels.y});
        if (element instanceof HTMLImageElement) {{
            return element.currentSrc;
        }}
        return '';
    }})()
");
Debug.Log("Image URL: " + imageUrl);