2013-04-17 6 views
0

У меня есть html-страница с именем parent.html, у которой есть аккордеон Bootstrap. Нажимая на ссылку на аккордеоне, он вызывает другую страницу search.html и открывает iframe в модальном режиме.Как получить доступ к родительскому окну, содержащему модальный из iframe, который открывается в этом модальном

search.html имеет кнопку «закончить», функциональность которой заключается в том, чтобы закрыть модальные данные, размещенные на аккордеоне, и аккордеон должен оставаться открытым.

Я пробовал .opener(). Кажется, это не работало. Любые указатели?

parent.html

Магазин для флориста Найти Флорист
$(function() { 
    $("*[data-modal]").click(function (e) { 
     e.preventDefault(); 
     var href = $(this).attr('href'); 
     if (href.indexOf('#') != 0) { 
      $('<div id="searchBox" class="modal bigModal" data-backdrop="static"><div class="searchModal-header gutter10-lr"><button type="button" onclick="window.location.reload()" class="close" data-dismiss="modal" aria-hidden="true">×</button></div><div class=""><iframe id="search" src="' + href + '" class="searchModal-body"></iframe></div></div>').modal(); 
     } 
    }); 
}); 

search.html

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<head> 
    <meta charset="utf-8"> 
    <title>Getting Started</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.css"> 
</head> 
<body id="detail"> 
<form class="form-horizontal" id="frmdetail" name="frmdetail" action="preferences" method="POST"> 
<div class="row-fluid gutter10-tb border-t"> 
    <a class="btn btn-primary my-list" href="#">Finish</a> 
</div> 
</form> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function(){ 

     if (top === window) { 
      alert("this page is not in an iframe"); 
     } else { 
      alert ("Im here"); 
      $('.my-list').click(function(){ 
       alert("Im clicked"); 
      $('.modal', opener.document).dialog('close'); 
     }); 
     } 
    }); 
</script> 
</body> 
</html> 

ответ

0

Вы можете попробовать с PostMessage: http://en.wikipedia.org/wiki/Cross-document_messaging https://developer.mozilla.org/en-US/docs/DOM/window.postMessage

Вы должны послать команду из search.html на главную страницу, и пусть на главной странице обработки события принятого сообщения.

Вы найдете то, что вам нужно в ссылках выше

Пример (родительская страница):

window.onmessage = function(e){ 
    //Here is the data that you receive from search.html 
    var DataReceived = e.data; 
    var OriginUrl = e.origin; 

    //Do what you want when the message is received 
}; 

Пример (search.html):

function buttonClick() { 
    var curDomain = location.protocol + '//' + location.host; //This will be received as e.origin (see above) 
    var commandString = "Hello parent page!"; //This will be received as e.data 
    parent.postMessage(commandString,curDomain); //Sends message to parent frame 
} 

windows.onmessage на родительской странице должно быть «запущено» при загрузке страницы. Функция «buttonClick()» может быть вызвана, когда и где вы хотите отправить сообщение на родительскую страницу, которая будет выполнять некоторые вещи (в данном случае ваши вещи с аккордеонным)

EDIT: , чтобы закрыть modal try this путь:

родитель:

window.onmessage = function(e){ 
    //Here is the data that you receive from search.html 
    var DataReceived = e.data; 
    var OriginUrl = e.origin; 
    if (e.data == 'close') { 
     $(this).modal('hide'); //Example code, you can run what you want 
    } 
}; 

Поиск:

function buttonClick() { 
    var curDomain = location.protocol + '//' + location.host; //This will be received as e.origin (see above) 
    var commandString = "close"; //This will be received as e.data 
    parent.postMessage(commandString,curDomain); //Sends message to parent frame 
} 

в этом случае вы отправить сообщение 'закрыть' на родительском Фрам е. Когда родитель получает сообщение, он проверяет, закрыт ли он, а затем запустил нужный вам код (в этом случае вы закрываете свой модальный диалог $ («. Modal»). («Закрыть»))

+0

Вы сможете для эскиза образца кода PLS – dragonfly

+0

ОК, я напишу подробный ответ –

+0

спасибо Альберто. Я попробую его и обновит. Благодаря тонну. – dragonfly

Смежные вопросы