Assign a variable the source of the web subsurface A-frame setting

I want to utilize the websurface A-frame component () to change the URL of the websurface when a button is clicked. I have defined a variable called source and I want the websurface URL to be updated to the value of this variable upon clicking the button. For instance, if the variable source is set to "https://google.ca" and the button is clicked, then the websurface URL will be modified to . Here is my 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98f9feeaf9f5fdb5effdfaebedeafef9fbfdebd8a9b6acb6a8">[email protected]</a>/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/

Answer №1

The module utilizes an i-frame that can be accessed through the reference provided at this link:

element.websurface_iframe

You can interact with it similar to any other i-frame, such as modifying the src property:

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d7c7b6f7c7078306a787f6e686f7b7c7e786e5d2c3329332d">[email protected]</a>/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>


Note that some servers may restrict requests from external origins - for example, https://google.ca enforces restrictions on framing content from different origins (refer to the snippet below for more details):

X-Frame-Options' to 'sameorigin'

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Flipping the camera rotation matrix in three.js

I am struggling with a scenario involving objects and a camera being controlled by a trackball. Whenever I add a new object to the main object, I want it to maintain its original orientation regardless of how the camera has moved around. For instance, with ...

Hide elements forever once the form is submitted

I'm seeking help to figure out how to make certain elements disappear after a form submission on my website's dashboard page. Specifically, I need to hide three elements once the user has submitted a form. Elements that need to be hidden: .vc_t ...

How can you eliminate the first elements of two or more arrays of objects until all of their first elements match based on a specific field?

My Typescript code includes a Map object called `stat_map` defined as const stat_map: Map<string, IMonthlyStat[]> = new Map(); The interface IMonthlyStat is structured as shown below (Note that there are more fields in reality) export interface IMon ...

Activating a tab using a JS call in Bootstrap with the data-toggle attribute

My JSP page is using bootstrap's data-toggle="tab" functionality to display tabs. When the page loads, one tab is made active by default. <ul class="nav st-nav-tabs"> <li class="active"><a href="#tab1" data-toggle="tab">First Ta ...

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

Is there a way to trigger a tag when the user shares their location with the browser? I attempted using the following code within a custom JavaScript variable in my GTM Container, but it didn't seem to work. navigator.permissions && navigator ...

Function $locationChangeStart in AngularJS not triggering

My code using the $location service in angular seems to be malfunctioning. angular.module("app",[]).run(function($rootScope) { var $offFunction = $rootScope.$on("$locationChangeStart", function(e) { if (confirm("Are you sure")) return $ ...

What is the process for refreshing the component content in Angular 2?

There was a moment during execution when my URL had the following appearance: http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96 I desire to visit a page with a different GUID and different content. http://localhost:4200/personal/{other ...

Steps for disabling and collapsing an individual header on the JQuery Accordian

Looking to adjust the behavior of 4 headers in accordions? Specifically, you want to collapse and disable only the first header out of the set. Here's how: $("#ExpandCollapse").accordion({ active: false, collapsible: true }); To ...

Error in React Component: Array objects in response are not in correct order

My React app is receiving data via websocket, with a big object that contains game information. One of the properties is an array of player objects: { propertyX: "X", players: [{player1}, {player2}, {player3}], propertyY: "Y" } The issue I'm f ...

Designing a query feature to explore a Sequel Database utilizing a 'RETRIEVE' approach

In my index.erb, I've created a search bar with the following code: <nav> <div class="nav-wrapper"> <form> <div class="input-field"> <input id="search" type="search" placeholder="Search..." required> ...

Can you explain the distinction between document.body.ononline and navigator.onLine?

Can you explain the distinction between document.body.ononline and navigator.onLine? Do they utilize the same JavaScript API for checking network connectivity status (online/offline)? I have searched on Google but couldn't find a definitive answer. If ...

Generate interactive tables using data from an XML file

Hello, I'm in the process of generating tables from an XML file using Node.js with the Express framework. I am utilizing npm modules xmldom and xmldoc for this task. The objective is to present these data tables on an ejs page. Here is the structure ...

What steps do I need to take to ensure that my AJAX button press request functions properly within my Django setup?

Is there a way to utilize a JavaScript string variable in a Python function and then return it back to a JavaScript variable efficiently? Perhaps using Json/ajax can help with this? To start, there is an HTML element where a string is stored: <h2 id=&q ...

Bootstrap 5 does not support tab navigation functionality

I created a new HTML page, and I encountered an issue while trying to enable tabs using JavaScript. <html> <head> <title>Excel Viewer</title> <link hr ...

Ways to detect when the window printing process has been completed

Within my application, I attempted to generate a voucher page for the user using the following code: var htm ="<div>Voucher Details</div>"; $('#divprint').html(htm); window.setTimeout('window.print()',2000); The &apo ...

Unable to figure out a method to properly synchronize a vue.js asynchronous function

I am facing an issue with my code where everything works fine if I uncomment the "return" statement in fetchData. How can I make sure that I wait for the completion of this.fetchData before populating the items array? I have tried using promises, async/awa ...

Console warning in Next.js: "The 'style' property did not match."

Currently working on a website with Next.js, I've encountered a red color warning in the console related to the Image component from 'next/Image'. Unsure of the reason for this warning, I'm seeking to resolve it to ensure the project&ap ...

How do I combine Firefox binary specification with adding the Firebug extension when using Selenium?

Presently I am utilizing the code below. var co = require('co'); var WebDriver = require('selenium-webdriver'); var SeleniumServer = require('selenium-webdriver/remote').SeleniumServer; co(function *() { // async var ser ...

Is it possible to create a camera orbiting effect using only canvas without relying on WebGLRenderer?

Just starting out with three.js and looking to avoid using WebGLRenderer (renderer = new THREE.WebGLRenderer();) altogether. Instead, I'm interested in utilizing renderer = new THREE.CanvasRenderer();. The reason for avoiding WebGLRenderer is its lac ...

The date displayed on the popup calendar is local time, while the date selected is in Coordinated

Is there a way to maintain the selected date in UTC format? I am experiencing an issue where the pop-up calendar does not synchronize with the selected datetime. For instance, when I click on 08/13 and the selected date shows as 08/12. This discrepancy ...