Как реализовать селектор элементов iframe?(Как в хроме)

Question

Я пытаюсь получить в фрейме селектор элементов, как в Google Chrome.Мне не повезло с поиском результатов в Интернете, но некоторые из моих идей пока заключаются в том, чтобы, возможно, создать скрипт, который создает временные прослушиватели событий click и удаляет любые hrefs, чтобы он не перенаправлял.Хотя это может немного снизить производительность, учитывая, что для этого потребуется большое количество замен и событий щелчков.

Это то, что я пытаюсь реализовать в iframe:

За исключением, конечно, без самого инспектора.

Answer 1

Предполагая, что вы можете изменить содержимое iframe, вы можете добавить прослушиватель событий щелчка ко всему документу, который получает цель, по которой щелкают, и предотвращает действие по умолчанию.Затем вы можете использовать цель и стилизовать ее или отобразить информацию о ней.

document.addEventListener( 'click', function( e ) {
    e.preventDefault();

    e = e || window.event;
    var target = e.target || e.srcElement;

    // now that you have the target and you've prevented
    // the default action such as redirecting to a href,
    // you can style the target or do whatever you want
    // to it.
    target.classList.add ( "selected" );

}, false );

Это не должно облагаться налогом на производительность.

Если вы не можете изменить содержимое iframe, ноКонтент iframe находится в том же домене, что и родительская страница, вы все равно можете настроить таргетинг на документ iframe с помощью функций jQuery.Вы бы добавили прослушиватель событий выше так:

var iframe = document.getElementById('your-iframe-id');
var iframe_doc = iframe.contentDocument || iframe.contentWindow.document;
iframe_doc.addEventListener( 'click', function( e ) {
    ...

Если содержимое iframe не приходит из домена родительской страницы, вы столкнетесь с ошибкой, вызванной междоменной политикой.Вы можете обойти это, используя прокси на стороне сервера, но это выходит за рамки этого вопроса.

---

Вопрос имеет очень широкий характер, но это может помочь вам начать.