Search code examples
javascriptthree.jsaframewebvr

A-frame set websubsurface source to a variable

I am using the websurface A-frame component () and I'm wondering how I can make it so when a button is clicked, the url of the websurface will change to the value of a variable I've defined called source. What should happen is for example, if the variable source is set to "https://google.ca" and you click the button, the websurface url will change to https://google.ca. Current code:

 <!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/[email protected]/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 with code: https://jsfiddle.net/AidanYoung/7vye3osa/2/

Solution

  • The component is using an i-frame accessible with the reference:

    element.websurface_iframe

    You can use it like any other i-frame - like changing the src property:

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>

    Keep in mind - the originating server may not welcome requests from other origins - like https://google.ca which explicitly tells you, that only websites from the same origin may display it in a frame (check the logs in the snippet below):

    X-Frame-Options' to 'sameorigin'


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