Случайное событие Javascript, не распространяющееся на элемент внутри контекста iFrame

Question

Я работаю над конструктором WYSIWYG, который позволяет конечному пользователю выбирать цвета через поля [input type = "color"]. Этот интерфейс имеет входы с левой стороны, а с правой стороны - iframe, указывающий на сгенерированный предварительный просмотр. Как правило, при щелчке по входу и изменении цвета он вызывает функцию update (связанный с помощью базового вида через изменение событие на поле ввода). Затем эта функция обновления изменяет значения CSS в iFrame для предварительного просмотра в реальном времени. Это работает нормально.

Однако я строю единичную тестовую страницу, которая по существу проверяет, что изменение поля ввода на определенный цвет действительно изменит цвет в предварительном просмотре. По существу это: «Измените ввод на PINK. Связал ли соответствующий CSS-селектор ввода с предварительным просмотром PINK?»

Структура тестовой страницы устройства заключается в том, что конструктор загружается через iFrame. Так что теперь мы имеем:

• Layer 0: Протокол испытаний блока
• Layer 1: изменение цвета входы
• Layer 2: в режиме реального времени просмотр

---

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

Вот код:

for (i in testable) { 
    item = testable[i]; 
    item.element.val(tempColor); 
    item.element.trigger('change'); 
} 

Если я тяну это выходит за рамки модуля тестирования и использовать консоль браузера, этот код имеет тот же эффект (обновления ввода, но триггер не называется):

$("#testFrame").contents().find('input#cat_RowColoralternate').val('#AAEFCC').trigger('change') 

Чтобы доказать, что событие существует и на самом деле работает, если я загрузить его непосредственно без тестирования слоя (например, загрузка приложения напрямую), этот код работает точно так же, как это ожидалось.

$(document).find('input#cat_RowColoralternate').val('#AAEFCC').trigger('change'); 

Единственное отличие является дополнительным слоем плавающего фрейма, так что моя теория состоит в том, что событие не распространяется от слоя 0 к слою 1.

Answer 1

Я не верю, что вы можете вызвать события JQuery через таким образом. Вызов .trigger() происходит в родительском фрейме и поэтому не работает корректно/вообще в объекте jQuery в iframe.

Вместо этого вам нужно раздобыть объекта JQuery внутри фрейма, и выполнить триггер там:

var framejQuery = $('#testFrame').get(0).contentWindow.$; 
framejQuery('input#cat_RowColoralternate').val('#AAEFCC').trigger('change');