Доступ к элементам и их свойствам из документа <iframe>к родительскому документу

Question

Я хочу получить доступ к элементу, его событиям и свойствам из дочернего документа, который находится в <iframe> и который <iframe> добавлен на страницу.

У меня есть опрос, который я включаю встраница с использованием <iframe>. Я хочу инициировать события из опроса, чтобы при входе на страницу опроса срабатывал Lead код пикселя Facebook, а когда опрос завершался, CompleteRegistration срабатывает код пикселя Facebook. Поэтому я пытаюсь получить доступ к некоторым действиям / событиям из <iframe> для запуска пиксельного кода FB.

Оба документа находятся на одном сервере, но это не работает.

Я пробовал это:

$(document).ready(function() {
  $('#assessment').load(function(){
    var iframe = $('#assessment').contents();
    iframe.find("h1 .state__title").click(function() { 
      alert("test");
    });
  });
});

Также это:

var a = window.frames['assessment'].contentDocument.getElementsByClassName('h1').innerHTML;
alert(a);

Любая помощь приветствуется. Заранее спасибо.

Answer 1

Во-первых, добавьте в свой iframe событие onload, эта загрузка вызовет функцию с двумя целями:

• отправит сообщение в iframe, чтобы сообщить содержимому этого iframe, что оно былозагружено
• отправка страницы DOM в iframe при запросе

[родительский файл]

<iframe id="assessment" src="target.html" onload="check()">
    ...
</iframe>

, а также мы связываем то же действиев свойство window.onmessage, так что будет обрабатываться каждое сообщение, полученное из iframe.

[родительский файл]

window.onmessage = function(event) {
     check(event);
};

и функция:

[родительский файл]

function check(event) {
    if(!event || !event.data){
        // if the iframe is loaded, then tell it so
        document.getElementById('assessment').contentWindow.postMessage('','*');
    }else{
        // if the Window received a message from the iframe, then send
        // the page dom to the iframe
        event.source.postMessage(document.body.innerHTML, event.origin);
    }
}

И в iframe мы свяжем window.onmessage с функцией, которая имеет двойную цель:

• подтвердите, что iframe был загружен, поэтому запрашивает данные у родителя
• получает дом от родителя

[дочерний файл]

window.onmessage = function(event) {
    if(!event.data){
        // If the iframe was loaded, tell the parent to send
        // its dom
        window.parent.postMessage('get parent DOM',event.origin)
    }else{
        // If the parent sent its DOM, process it
        var dom = $('<div></div>').append(event.data);
        console.log(dom.html());
        ...
    }
};