2015-01-15 5 views
1

У меня есть два файла с именем main_page.html и dialog_box.html (см. Код ниже). Я хочу, чтобы мой handleCloseDialogButton() «закрыл диалоговое окно», другими словами, чтобы перезагрузить main_page.html, с theFrame.style.display сбрасывать на «none». Как я могу это сделать? Должен ли я использовать window.open("main_page.html") или window.location.href="main_page.html" или что-то еще? Примечание. Я не хочу использовать функцию Javascript alert(), потому что ее возможностей недостаточно для того, что мне нужно.Закрыть (диалоговое окно) iFrame от кнопки в iFrame

Содержание main_page.html:

<!DOCTYPE html> 
<html> 
<meta charset="UTF-8"> 
<head> 
<script> 
function handleDialogButton() 
{ 
var theFrame=document.getElementById("myDialogBox"); 
theFrame.style.display="block"; 
theFrame; 
} 
</script> 
</head> 
<body> 
<div id="myDiv"> <h2> Hello world. This is the main page.</h2></div> 
<iframe id="myDialogBox" src="./dialog_box.html" style="display:none"> </iframe> 
<input type="button" id="dbbutton" name="dbbutton" value="Open Dialog Box" 
onClick="javascript:handleDialogButton();" /> 
</body> 
</html> 

Содержание из dialog_box.html:

<!DOCTYPE html> 
<html> 
<meta charset="UTF-8"> 
<head> 
<script> 
function handleCloseDialogButton() 
{ 

} 
</script> 
</head> 
<body> 
<div id="myDiv"> <h2> Hello world. I am the dialog box.</h2></div> 
<input type="button" id="cbbutton" name="cbbutton" value="Close Dialog Box" 
onClick="javascript:handleCloseDialogButton();" /> 
</body> 
</html> 
+0

'window.location.href =" main_page.html "' будет достаточно. Вы также можете сбросить div: 'document.getElementById (" myDialogBox "). Style.display =" none "' – devqon

+0

@devqon Ваше предложение не работает. Он просто отображает содержимое главной страницы в диалоговом окне –

+0

. Я вижу, не прочитал ваш вопрос правильно. Вы хотите закрыть iFrame с помощью кнопки внутри iFrame. – devqon

ответ

1

Вы можете получить доступ родительские элементы из фрейма с помощью window.parent. Для получения более подробной информации см. window.parent.

С помощью window.parent вы можете либо вызвать родительскую функцию js, либо получить доступ к родительскому элементу. Доступ к родительскому элементу в вашем случае должен выглядеть так: window.parent.document.getElementById ('myDialogBox');

Используйте это в вашей функции handleCloseDialogButton и установите дисплей в NONE:

function handleCloseDialogButton() 
{ 
window.parent.document.getElementById('myDialogBox').style.display="none"; 
} 

Примечание: Это не будет работать в файловом режиме в Chrome. Вы должны поместить свои страницы на веб-сервер, а также работать в браузере Chrome.

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