У вас проблемы с Одинаковой политикой происхождения : страница в рамке обслуживается на другом хосте, чем родительское окно. Мой ответ состоит из двух решений:
- Присоединение и обработка события
onload в <iframe>, http://jsfiddle.net/BYssk/1/
- Использование
window.postMessage (см. Нижнюю часть ответа, рекомендуется) , http://jsfiddle.net/5fGRj/1/
Чтобы справиться с этим, вы можете использовать один из следующих методов. Оба метода требуют перезагрузки страницы во фрейме, когда она должна быть закрыта. Это может быть достигнуто путем отправки формы. Нет обработчиков onclick. Предварительный просмотр обоих методов: http://jsfiddle.net/BYssk/1/
1. Если ваш iFrame встроен в страницу:
<script>
var fancyboxClose = (function(){ //Define a function
var loaded = 0; //Define a local, "PRIVATE" counter
return function(){ //Define a public method
// Increases the counter by one, modulo 2:
// Every "first" time, the "loaded++" returns an even number -> false
// When the page reloads again, the fancybox is submitted. The counter
// increases again -> odd number => modulo 2 = 1 => true
if(loaded++ % 2) $.fancybox.close();
}
})();
</script>
<iframe src=".." onload="fancyboxClose()"></iframe>
2. Если ваш iFrame создается динамически:
//The code below is executed inside some function. Definitely NOT globally
var loaded = 0;
$("<iframe>") // Create frame
.load(function(){ // Bind onload event
if(loaded++ % 2) $.fancybox.close();
})
.attr("src", "...") // Set src attribute
.appendTo("body"); // Append the iframe, anywhere. For example: <body>
Двигатель этого метода:
- Когда содержимое фрейма загружено, запускается событие
onload (1).
- Когда пользователь отправляет форму или покидает страницу внутри фрейма, запускается другое событие
onload (2).
- Скрипт ничего не делает на первом
onload событии. Однако во втором событии onload скрипт вызывает метод $.fancybox.close().
<ч />
Альтернативный метод
Другой метод состоит в использовании современного метода window.postMessage. Это намного надежнее, чем предыдущий метод, и поддерживается во всех современных браузерах. Скрипка: http://jsfiddle.net/5fGRj/1/
Скрипт в главном окне:
function closeFancyBox(){
$.fancybox.close();
}
window.addEventListener("message", closeFancyBox, false);
Необходимый код внутри оформленной страницы:
<script>
function initiateClose(){
parent.postMessage("Close fancybox please.", "*");
// * should be more specific, for security reasons
// See https://developer.mozilla.org/en/DOM/window.postMessage
}
</script>
PostMessage method<br />
<input type="submit" value="Inititate 'close'" onclick="initiateClose()">