Unity Webgl内嵌网页页面

Unity Webgl端有时候会有这样一个需求，在Unity界面上内嵌一个网页，并且可以在界面上把这个网页关掉（不是重新打开新的标签页）

效果如下：

现在来实现这个功能：
1.在Assets文件夹下新建一个Plugins目录：

在Plugins文件夹中创建一个文件 __Internal.jslib (必须是jslib格式，并且必须在Plugins文件夹下)
__Internal.jslib内容如下：

mergeInto(LibraryManager.library, {//开启新窗口OpenUrlWindow:function(str) {OpenUrl_Window(Pointer_stringify(str)); //调用js方法},//关闭新窗口CloseUrlWindow:function(){CloseUrl_Window();//调用js方法},
});

2.新建一个脚本脚本内容如下：


using System.Runtime.InteropServices;
using UnityEngine;
using UnityEngine.UI;public class WebglOpenUrlTest : MonoBehaviour
{/// <summary>/// 需要打开的链接/// </summary>public string url;public Button Btn_NewWin;public Button Btn_CloseWin;[DllImport("__Internal")]private static extern void OpenUrlWindow(string str);[DllImport("__Internal")]private static extern void CloseUrlWindow();void Start(){Btn_NewWin.onClick.AddListener(delegate{OpenUrlWindow(url);});Btn_CloseWin.onClick.AddListener(delegate{CloseUrlWindow();});}
}

将该脚本挂载在物体对象上

打Webgl包，打包完成后，打包文件夹中会有一个index.html文件

打开文件添加以下内容：

我的index.html如下：

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Unity WebGL Player | 水库3D模型</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css"></head><body><div id="unity-container" class="unity-desktop"><canvas id="unity-canvas" width=1920 height=1080></canvas><div id="unity-loading-bar"><div id="unity-logo"></div><div id="unity-progress-bar-empty"><div id="unity-progress-bar-full"></div></div></div><div id="unity-warning"> </div><div id="unity-footer"><div id="unity-webgl-logo"></div><div id="unity-fullscreen-button"></div><div id="unity-build-title">水库3D模型</div></div></div><div id="urlWindow" style="display:none;width:1000px;height:600px;top: 50%;left:50%;transform: translate(-50%,-50%);position:absolute;border: 0; margin: 0; padding: 0">  <iframe id="iframe" src="" style="width: 100%;height: 100%;"></iframe>   </div><script>var container = document.querySelector("#unity-container");var canvas = document.querySelector("#unity-canvas");var loadingBar = document.querySelector("#unity-loading-bar");var progressBarFull = document.querySelector("#unity-progress-bar-full");var fullscreenButton = document.querySelector("#unity-fullscreen-button");var warningBanner = document.querySelector("#unity-warning");// Shows a temporary message banner/ribbon for a few seconds, or// a permanent error message on top of the canvas if type=='error'.// If type=='warning', a yellow highlight color is used.// Modify or remove this function to customize the visually presented// way that non-critical warnings and error messages are presented to the// user.function unityShowBanner(msg, type) {function updateBannerVisibility() {warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';}var div = document.createElement('div');div.innerHTML = msg;warningBanner.appendChild(div);if (type == 'error') div.style = 'background: red; padding: 10px;';else {if (type == 'warning') div.style = 'background: yellow; padding: 10px;';setTimeout(function() {warningBanner.removeChild(div);updateBannerVisibility();}, 5000);}updateBannerVisibility();}var buildUrl = "Build";var loaderUrl = buildUrl + "/OpenUrlWebgl.loader.js";var config = {dataUrl: buildUrl + "/OpenUrlWebgl.data",frameworkUrl: buildUrl + "/OpenUrlWebgl.framework.js",codeUrl: buildUrl + "/OpenUrlWebgl.wasm",streamingAssetsUrl: "StreamingAssets",companyName: "DefaultCompany",productName: "水库3D模型",productVersion: "0.1",showBanner: unityShowBanner,};// By default Unity keeps WebGL canvas render target size matched with// the DOM size of the canvas element (scaled by window.devicePixelRatio)// Set this to false if you want to decouple this synchronization from// happening inside the engine, and you would instead like to size up// the canvas DOM size and WebGL render target sizes yourself.// config.matchWebGLToCanvasSize = false;if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {container.className = "unity-mobile";// Avoid draining fillrate performance on mobile devices,// and default/override low DPI mode on mobile browsers.config.devicePixelRatio = 1;unityShowBanner('WebGL builds are not supported on mobile devices.');} else {canvas.style.width = "1920px";canvas.style.height = "1080px";}loadingBar.style.display = "block";var script = document.createElement("script");script.src = loaderUrl;script.onload = () => {createUnityInstance(canvas, config, (progress) => {progressBarFull.style.width = 100 * progress + "%";}).then((unityInstance) => {loadingBar.style.display = "none";fullscreenButton.onclick = () => {unityInstance.SetFullscreen(1);};}).catch((message) => {alert(message);});};document.body.appendChild(script);//打开新窗口function OpenUrl_Window(str) {var otherDiv = document.getElementById('urlWindow');otherDiv.style.display = "block";document.getElementById("iframe").src =str;}    //关闭新窗口function CloseUrl_Window() {var otherDiv = document.getElementById('urlWindow');otherDiv.style.display = "none";document.getElementById("iframe").src =""};</script></body>
</html>

将项目用本地服务打开即可

Unity Webgl内嵌网页页面相关推荐

Unity发布内嵌网页的PC客户端
Unity开发PC客户端内嵌网页的工具名为:SimpleWebView,资源本人已经上传至CSDN共享:MAC.android.ios端需要用的插件为UniWebView,鉴于UniWebView教程 ...
Unity中内嵌网页插件UniWebView使用总结
一.目前有三种方式可以实现在Unity工程中实现内嵌网页的功能: 1. UnityWebCore:只支持Windows平台,调用浏览器内核,将网页渲染到mesh,作为gameObject. 2. ...
Unity中内嵌网页插件 UniWebView，缩放网页
https://mp.weixin.qq.com/s/cesU-Jlxf_a_lGxIv6q_yQ 转载开发者俱乐部并且修改了 https://docs.uniwebview.com/api/ 插件文 ...
Unity集成内嵌网页插件－支持Android和IOS
本文所用到的插件,是修改自一个日本人keijiro的代码.他的源码地址为:https://github.com/keijiro/unity-webview-integration 为更易于使用,本插件 ...
Unity 内嵌网页
uniwebview 官网 http://uniwebview.onevcat.com/reference/class_uni_web_view.html http://uniwebview.onev ...
Unity内嵌网页插件
Unity内嵌网页插件这里我用到的内嵌插件是EmbeddedBrowser3.1.0版本,这是一个收费插件,笔者大大百度了好久,哈哈哈,最后还是选择掏钱买了一份,主要是实在是白嫖不到啊,倒是找到一个 ...
MFC内嵌web页面
MFC内嵌web页面方法一: 1.新建工程,插入ActiveX控件Microsoft Web Browser 2.添加关联变量WebDlg 3.添加代码WebDlg.Navigate(_T(&quo ...
Java-Swing内嵌网页判断网址类型
最近开发了一个项目,用Swing窗口界面内嵌网页,然后从记事本中获取到网址,页面显示网址内容,然后人工点击单选按钮判断所打开的网站是什么类型,将对应类型的网址添加到对应的记事本中,然后自动获取下一个网 ...
微信小程序与内嵌网页交互实现支付功能
上个月,小程序开放了新功能,支持内嵌网页,所以我就开始了小程序内嵌网页之路,之前我只是个小安卓. 内嵌网页中可使用JSSDK 1.3.0提供的接口,可坑就来了,居然不支持支付接口的调用,经过一番研究, ...

Unity Webgl内嵌网页页面

Unity Webgl内嵌网页页面相关推荐

最新文章

热门文章