How to link a html file from A-Frame entity?

Question

I'm trying to load a HTML file when clicked on the <a-entity> and it doesn't work with the traditional HTML methods.(using href) Please see the code below.

<a-scene>
    <a-assets>
      <a-asset-item id="mBot" src="../assets/robot1.glb"></a-asset-item>
      <img id="panorama" src="../assets/stock.jpg" />
    </a-assets>

    <!-- Robot -->
    <a-entity
      gltf-model="#mBot"
      scale="4 4 4"
      position="0 1 2"
      id="mBot-1"
    >
      <a-animation attribute="rotation" to="0 360 0" repeat="indefinite" >
      </a-animation>
    </a-entity>


    <!-- Robot -->
    <a-entity
      gltf-model="#mBot"
      scale="4 4 4"
      position="8 1 2"
      id="mBot-2"
    >
      <a-animation attribute="rotation" to="0 -360 0 " repeat="indefinite">
      </a-animation>
    </a-entity>



    <a-entity position="4 0 8">
      <a-camera></a-camera>
    </a-entity>

    <a-sky src="#panorama"></a-sky>
  </a-scene>

I want to load two separate html files when clicked on entity id=mBot-1 and mBot-2.
Highly appreciate any help to solve this.

Answer 1

The issue can be resolved by making an own link with js.

Create your own element, which will change the window.location on click:

    AFRAME.registerComponent("mylink", {
  init: function() {
    this.el.addEventListener("click", (e)=> {
       window.location = this.data.href;
    })
  }
})

HTML

<a-text color="black" position="1 1 -2" value="goToSchatzkin" 
    mylink="href: https://schatzkin.com;"></a-text>

---

Final Code

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("mylink", {
    init: function() {
      this.el.addEventListener("click", (e) => {
        window.location = this.data.href;
      })
    }
  })
</script>

<a-scene cursor="rayOrigin: mouse">
  <a-text color="black" position="1 1.6 -2" value="Click the text"
          mylink="href: https://schatzkin.com;"></a-text>
  <a-entity position="-1 1.6 -2" 
            link="highlighted: true; 
                  highlightedColor:#000000; backgroundColor: red; 
                  href: https://schatzkin.com; titleColor: black; 
                  title: click the image below.;
                  image: https://i.imgur.com/wjobVTN.jpg;
                  visualAspectEnabled: true"></a-entity>
</a-scene>