Событие JQuery click не работает для iframe, в мобильном браузере

Question

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

У меня есть 2 страницы (в том же домене SAME, поэтому у меня нет проблем с политикой междоменной безопасности), один из них находится в iframe внутри другого. Так как мне нужно, чтобы поймать кликов на обоих родителей и ребенка, я создал DIV, который покрывает IFRAME, а затем вызывает метод щелчка на дочерний элемент:

Вот демонстрационный код, который я сделал:

Родитель файл:

<script> 
$(document).ready(function() 
{ 
    $("#floating_play_button").click(function() 
    { 
     alert("just clicked floating_play_button... will try to click iframe's on click for link2"); 
     $('#slider').contents().find("#link1").click(); 
    }); 
}); 
</script> 

<div id="floating_play_button" style="cursor:pointer; left: 0px; top:0px; width:100%; height:395px; position:absolute; border:2px solid red;"></div> 
<iframe id="slider" src="slider_test.php" width="957" height="337" frameBorder="1" style="border:2px solid green;" ></iframe> 

Ребенка страница:

<script> 
$(document).ready(function() 
{ 
    $("#link1").click(function() 
    { 
     alert("#link1 clicked..."); 
    }); 
}); 
</script> 

<div id="link1"> 
    <a href="#">Link 1</a><br /> 
</div> 

Это прекрасно работает на все настольные браузеры, но не на Chrome для Android (версии от 22 июля 2013 года) по умолчанию Android б рубильник, iPad или iPhone.

На странице ребенка я попробовал обе эти формы, но ни работы:

$(document).on('click', '#link1', function() 
    { 
     alert("on click activated for link1"); 
    }); 

    $("#link1").click(function() 
    { 
     alert("#link1 clicked..."); 
    }); 

В качестве дополнительной записке, селектор в порядке. Я могу сделать что-то вроде изменения текстовых атрибутов и подобных с помощью jQuery, и он отлично работает. Я просто не могу назвать событие click.

Любые советы или указатели?

Спасибо!

Answer 1

Мой ответ основан на ios, потому что это все, что у меня есть, но может быть одинаковым для android.

События click работают немного по-разному на устройствах с сенсорным управлением. Нет мыши, поэтому технически нет щелчка. В соответствии с этой статьей - http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html - из-за ограничений памяти события click только эмулируются и отправляются из элементов привязки и ввода. Любой другой элемент может использовать сенсорные события, или событие нажатия вручную инициализируются путем добавления обработчика к исходному HTML элемента, например, чтобы заставить события нажатия на дивы:

$('div').each(function(){ 
    this.onclick = function() {} 
}); 

Теперь нажмите будет вызван дивы, поэтому может быть прослушан jQuery.

---

В вашем случае, вы можете просто изменить слушателя к элементу анкера:

$("#link1 a").click(function() 
{ 
    alert("#link1 clicked..."); 
}); 

Или использовать сенсорную событие на DIV:

$(document).on('touchstart', '#link1', function() 
{ 
    alert("on click activated for link1"); 
}); 

затем вызвать следующим образом:

$('#slider').contents().find("#link1").trigger('touchstart'); 

Описание: Это fidd может быть полезно с помощью нескольких экспериментов - http://jsbin.com/ukalah/9/edit

Answer 2

Хром не разрешает доступ к содержимому iframe. Даже если содержимое имеет одинаковое происхождение.

Вы должны использовать postMessage для связи между кадрами.

Может быть, это помогает: cross-window-messaging-with-postmessage

Answer 3

Есть два экземпляра Jquery загружается. Один в родительском и один внутри iframe. Вещи перепутались где-то между созданием события на родительском экземпляре и обработкой на дочернем.

Если вы посылаете событие, не используя двигатель событий JQuery, он работает:

$("#floating_play_button").click(function(){ 
    //$('#slider').contents().find("#link1").click(); // instead: 
    var newEvent = document.createEvent('Event'); 
    newEvent.initEvent('click',true,true); 
    $('#slider').contents().find("#link1").first()[0].dispatchEvent(newEvent); 
}); 

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

$("#floating_play_button").click(function(){ 
    //$('#slider').contents().find("#link1").click(); // instead: 
    window.frames['slider'].$('#link1').click(); 
}); 

---

EDIT 1

Я не мог понять, что именно перерывы , но я заметил, что браузеры, где это не удалось, не реализовали конструктор Event. События были созданы вместо document.createEvent. Поэтому я предполагаю, что некоторые ссылки теряются на этом пути, используя неправильный объект document. Если кто-то может объяснить глубоко, пожалуйста ...