0

I am embedding a website inside my html:

<iframe id="myembed" src="http://bboxfinder.com/#0.000000,0.000000,0.000000,0.000000" style="width:50%; height: 600px"></iframe></div>

This is a map service to draw a bounding box on a location and it returns coordinates for the box; I need to take that coordinate, which is within a span tag named boundboxes inside the embedded website's HTML. I put a button inside my own HTML, and I was planning to do getelementbyid or getelementsbytagname in click event. However, it only returns a null value.

Then I tried this:

$( "#right" ).click(function() {

  var iframe = document.getElementById('myembed');

  var innerDoc = iframe.contentDocument || iframe.contentWindow.document;
  var element = iframe.contentWindow.document.getElementsByid("boxbounds")

    alert(innerDoc)

    
});

However, this gives the following error:

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

I have read about it here, it is related to some kind of security issue. I have tried other things too and at this point, I am almost convinced that there is no valid way to take an element within an embedded website. Could anybody help me with this?

Richard Wilson
  • 297
  • 4
  • 17
kron_ninja
  • 61
  • 8
  • 2
    Correct - you do not have scripting access to documents loaded into iframes, from a different origin. Without the active support of the remote site you are embedding there (they would have to provide some sort of API, that uses postMessage to communicate across domain boundaries), this can’t be done. – CBroe Jun 07 '21 at 11:38
  • You can write a proxy, a server process that takes a URL and returns the content from the other site – mplungjan Jun 07 '21 at 11:41
  • @mplungjan users have to draw bounding box in order the website to return me coordinates, so if that would be feasible. I have to find whole another solution – kron_ninja Jun 07 '21 at 11:51

0 Answers0