0

I am trying to develop a web application which has functionality similar to the Element Selector in developer tools in Chrome. I need to open any URL from other different domains, inside a container in my app, and the page should appear exactly as it appears in normal browser, with all it styles. Then I should be able to hover over the elements in the opened page, highlight it, and display some property information about this element.

I created a simple Angular app and used Iframe tag to open the third party page. But, when I try to attach event handlers, with addEventListener, to the DOM elements in the Iframe, I get the cross-domain error message.

Uncaught DOMException: Blocked a frame with origin "http://localhost:4200" from accessing a cross-origin frame.

I read some posts in stackoverflow like “Cross site contents cannot be read by JavaScript” and “If you don't have control over the framed site, you cannot circumvent the cross-domain policy.” For more details check the links:

Get DOM content of cross-domain iframe

Cross domain iframe issue

Following is my code:

<iframe id="pFrame" onload="frameLoad();" src="" />

function frameLoad() {
    let frame = document.getElementById("pFrame");
    let iframeWindow = frame.contentWindow;
    iframeWindow.addEventListener("mouseover", mouseOver, true);
    iframeWindow.addEventListener("mouseout", mouseOut, true);
    iframeWindow.addEventListener("click", onClick, true);
}

Do you have any advice or maybe suggest different technique to solve this problem?

Thanks

Shaheryar.Akram
  • 722
  • 10
  • 19
Hisham
  • 1
  • 1

1 Answers1

0

Have you tried looking the Mozilla Goggles project ?

It has an integrated editor, and their inspector seems to be very powerful.
Plus it don't require any application on your computer.

sodimel
  • 864
  • 2
  • 11
  • 24