A-frame 将 websubsurface 源设置为变量

Question

我正在使用 websurface A-frame 组件 ()，我想知道如何才能使它在单击按钮时，websurface 的 url 将更改为变量的值我已经定义了所谓的来源。例如，如果变量源设置为“https://google.ca”并且您单击按钮，websurface url 将变为 https://google.ca。当前代码：

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Example 1</title>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-websurfaces@1.4.0/dist/aframe-websurfaces.umd.js"></script>
    <script>
    function updateSource() {
    let source = "https://google.ca";
    
    }
    </script>
  </head>
  <body>
  <button style="position: fixed; z-index: 100000;" onclick="updateSource()">
  update src
  </button>
    <a-scene>
      <!--Camera-->
      <a-entity
        wasd-controls="acceleration: 20;"
        camera="active: true"
        look-controls="pointerLockEnabled: false"
        position="0 1.6 0"
      >
        <a-cursor position="0 0 -.05" scale=".04 .04 1"></a-cursor>
      </a-entity>

      <!--Environment-->
      <a-sky color="#aff"></a-sky>
      <a-plane
        rotation="-90 0 0"
        width="20"
        height="20"
        color="#3fa841"
      ></a-plane>

      <!--Websurface-->
      <a-entity
        websurface="url:https://aframe.io/; width:4; height:2;"
        position="2.25 1.5 -4"
      ></a-entity>

    </a-scene>
  </body>
</html>

Fiddle 代码：https://jsfiddle.net/AidanYoung/7vye3osa/2/

Answer 1

该组件正在使用 i-frame accessible with the reference:

element.websurface_iframe

您可以像使用其他任何东西一样使用它 i-frame - 就像更改 src 属性:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-websurfaces@1.4.0/dist/aframe-websurfaces.umd.js"></script>
<script>
  function updateSource() {
    let source = "https://threejs.org";
    const websurfaceEl = document.querySelector("[websurface]")
    websurfaceEl.websurface_iframe.src = source
  }
</script>
<button style="position: fixed; z-index: 100000;" onclick="updateSource()">
update src
</button>
<a-scene>
  <a-entity websurface="url:https://aframe.io/; width:4; height:2;" 
            position="0 1.6 -2"></a-entity>
</a-scene>

请记住 - 原始服务器可能不欢迎来自其他来源的请求 - 如 https://google.ca 明确告诉你，只有来自相同来源的网站才能在框架中显示它（检查日志中的下面的片段):

X-Frame-Options' to 'sameorigin'

<div>
  <iframe src="https://google.ca" width="500" height="250">
</div>

A-frame 将 websubsurface 源设置为变量

A-frame set websubsurface source to a variable

javascript

three.js

webvr

aframe