Phaser 3/JavaScript 将外部网页加载到新窗口/场景/画布

问题描述

是否可以弹出类似窗口的场景来加载网页（可能是 iFrame）？例如，如果我需要一个应用程序内弹出窗口（不是新弹出的浏览器窗口或重定向）来加载 Youtube/Twitch 直播流，或加载到游戏/应用程序上的外部赞助页面。我在 Google 上没有看到任何教程。

解决方法

您可以使用 DOMElement 在 Phaser 中加载几乎任何类型的 html。

因此您甚至可以按照以下代码加载 iFrame。

function create() {
  this.add.dom(350,250)
    .createFromHTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/crgzg0X0ZyA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>');
}

var game = new Phaser.Game({
  parent: "gameDiv",dom: { createContainer: true },scene: { create },width: 700,height: 500,});

<script src="https://cdn.jsdelivr.net/npm/phaser@3.52.0/dist/phaser.js"></script>
<div id="gameDiv"></div>

如果 iFrame 在 StackOverflow 上不起作用，请尝试使用 CodePen：https://codepen.io/ildede/pen/BaQYarG

iframe iframe javascript phaser-framework