1 Introduction
This is a browser plug-in that has been used in projects for a long time.
It is very responsible to say that this is the best browser plug-in on the PC platform.
The commercial paid price is 78 dollars, which is more expensive than plug-ins such as 3D Webview. The prices of 178 and 368 are very conscientious
Latest version download link(Please do not use it for commercial use)
1.1 Function overview
Basic and normal browser
- Support debugging platform Devtools function
- Support evil js
- Support h5 native video playback
- Support console capture
- Support unity to js, js to unity communication
- Support mouse and keyboard events
- Supports various browser operations, including forward, backward, refresh, print, copy, cut and paste, etc.
- Support multiple windows
- Support VR input
There are many functions waiting for you to discover
1.2 Installation
Like other unity plug-ins, double-click to complete the installation after downloading and unzipping. After the installation is complete, an additional ZFbrowser folder will appear in the project window. There are test scenarios in the demo directory.
2. Tutorial
2.1 Preparation
- Add ui canvas and RawImage objects to the scene
- Add the following components to the RawImage object. These components are: browser theme component Browser, virtual mouse interaction component Pointer UIGUI, and arrow display component Cursor Renderer OS
3. Create a new c# script BrowserMessager and place it on the object as a component
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using ZenFulcrum.EmbeddedBrowser;
[RequireComponent(typeof(Browser))]
public class BrowserMessager : MonoBehaviour
{
private Browser browser;
void Start()
{
// 获取当前物体上的Browser组件
browser = GetComponent<Browser>();
}
}
2.2 Load external URL
- Add the loading external URL method "browser.LoadURL()" to the newly created script
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using ZenFulcrum.EmbeddedBrowser;
[RequireComponent(typeof(Browser))]
public class BrowserMessager : MonoBehaviour
{
private Browser browser;
void Start()
{
browser = GetComponent<Browser>();
// 跳转到百度首页
browser.LoadURL("www.baidu.com",true);
}
}
Run it directly to see the Baidu homepage
2.2 Run html code directly
Call the "browser.LoadHTML()" method
browser.LoadHTML("<html><head><style>p{color: red;}</style></head><body><title>这是个html代码</title><p>html内容</p></body></html>");
2.3 Load unity local html file
There are three situations for loading local files:
- Load web resources in the unity project
- Load web resources packaged by assetbundle
- Load web page resources from local hard drive
2.3.1 Load web resources in the unity project
1 First create the BrowserAssets folder in the Assets level directory. Note that this is a peer, not a subordinate!
2 Throw the created html page and other resources into it
3 Change the url setting of the browser component to localGame://demo/1.html< /span>
localGame will automatically locate the BrowserAssets directory. demo is a folder I created. 1.html is the web page to be run
Note:
If there are resource calls in the same folder in the web page, don’t forget to remove the "/". For example, in the following code, if it is an external web page resource, slashes should be added, 
. If it is a local resource, the slash should be removed
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<img id = "img" src="图.png" alt="">
</body>
</html>
2.3.2 Load web resources packaged by assetbundle
2.3.3 Load web page resources from local hard disk
Do you still need to load web resources from the local hard disk? You should either set up a service to directly provide the URL, or use system.io to find the file address.
3. Communication between unty and html
To communicate between web page js and unity, at least two scripts, html and c#, need to be implemented respectively.
3.1 Communication: HTML => UNITY
The html code can be placed locally or on the server as described above. c# script is added to an object as a component
html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 创建一个按钮，绑定方法"jsevent"
<button type="button" onclick="jsevent()">点击按钮通信给unity</button>
<script type="text/javascript">
function jsevent() {
console.log("传参");
}
</script>
</body>
</html>
c# code
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using ZenFulcrum.EmbeddedBrowser;
using ZenFulcrum.EmbeddedBrowser.VR;
[RequireComponent(typeof(Browser))]
public class BrowserMessager : MonoBehaviour
{
private Browser browser;
void Start()
{
browser = GetComponent<Browser>();
//监听html 中的jsevent方法
browser.RegisterFunction("jsevent", (JSONNode jv) =>
{
// js多参数输入
Debug.Log(jv[0].Value);
});
}
}
Click the communication button
Unity has captured the information
The captured information can also be printed out directly using console.log on the html side, and then Call in c#
browser.onConsoleMessage += (string s1, string s2) => {
Debug.Log("js console info:" + s1 + s2);
};
Capture console data directly. However, it is troublesome to add data combination rules in order to distinguish the data.
3.2 UNITY => HTML
js code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//被unity调用的函数
function unityevent(item) {
console.log("unity参数:",item);
}
</script>
</body>
</html>
c# code
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using ZenFulcrum.EmbeddedBrowser;
using ZenFulcrum.EmbeddedBrowser.VR;
[RequireComponent(typeof(Browser))]
public class BrowserMessager : MonoBehaviour
{
private Browser browser;
void Start()
{
browser = GetComponent<Browser>();
}
private void Update()
{
if (Input.GetKey(KeyCode.Space))
{
browser.CallFunction("unityevent", "unity to js").Done();
}
}
}
Execute the program number and press the space button to see the parameters printed by unityevent in the js code.
Four other APIs
Directly execute js code
browser.EvalJS("console.warning(\"this is jscode\")");
Listen to browser console output
browser.onConsoleMessage += (string s1, string s2) => {
Debug.Log(s1 + "====" + s2);
};
Jump directly to the URL
browser.LoadURL("www.baidu.com",true);
Execute html code directly
browser.LoadHTML("<html><head><style>p{color: red;}</style></head><body><title>123123</title><p>html代码</p></body></html>");
Event triggered when the web page completes loading
browser.onLoad += (JSONNode jn) => {
Debug.Log("浏览器完成加载");
};