Estoy usando el componente A-frame de la superficie web () y me pregunto cómo puedo hacer que cuando se haga clic en un botón, la URL de la superficie web cambie al valor de una variable que he definido llamada fuente. Lo que debería suceder es, por ejemplo, si la fuente variable se establece en "https://google.ca" y hace clic en el botón, la URL de la superficie web cambiará a https://google.ca . Código actual:
<!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>Juega con el código: https://jsfiddle.net/AidanYoung/7vye3osa/2/
El componente está utilizando un i-frame accesible con la referencia :
element.websurface_iframe Puede usarlo como cualquier otro i-frame , como cambiar la propiedad 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> Tenga en cuenta que es posible que el servidor de origen no acepte solicitudes de otros orígenes, como https://google.ca , que le indica explícitamente que solo los sitios web del mismo origen pueden mostrarlo en un marco (verifique los registros en el fragmento a continuación) :
X-Frame-Options' to 'sameorigin' <div> <iframe src="https://google.ca" width="500" height="250"> </div>