Закрытие iframe от родителя или дочернего элемента. Как?

LongWayXD

Привет!

Я облазил почти везде и нашел эту тему: https://forums.digitalpoint.com/threads/close-iframe-from-within-that-iframe.582469/

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

Вот этот:

 [object HTMLIFrameElement]

Код (разметка): Теперь при нажатии кнопки iframe закрывается, но браузер сразу же отправляет меня:

 javascript: window.parent.document.getElementById('xbutton').parentNode.removeChild(window.parent.document.getElementById('xbutton'))

Код (разметка): ..с сообщением браузера следующего содержания:

 <a href="javascript: window.parent.document.getElementById('closeButton').parentNode.removeChild(window.parent.document.getElementById('closeButton'))">X</a>

Код (разметка): Что я делаю не так? Я использую 64-разрядную версию Waterfox/Firefox и хочу, чтобы она работала как в Chrome, так и в Firefox.

[Это работало в Chrome]. Надеюсь найти решение этой проблемы.

Спасибо!

ray1

Наконец-то я заставил его работать в обоих браузерах. Используйте onclick вместо href в теге или : Теперь остается кнопка закрытия, которая остается там после закрытия iframe. Есть идеи, как убрать его по клику?

MaZa_Mladwii

Это должно работать для вас (хотя в jquery):
http://jsfiddle.net/vtFQx/100/

Код:

 


<!DOCTYPE html>


<html>


<head>


<meta http-equiv="content-type" content="текст/html; кодировка = UTF-8">


<script type="text/javascript" src="[URL='https://lumtu.com/yti/au44uanNodHRwOi8vY29kZS5qcXVlcnkuY29tL2pxdWVyeS0xLjQuNC5taWt5C']http://code.jquery.com/jquery-1.4.4.min.js[/URL]"></script>


<style type="text/css">


#list {


overflow: auto;


}


#list li {


float: left;


margin-right: 10px;


}


div {


width: 450px;


height: 380px;


border: 1px solid gray;


position: relative;


}


iframe {


width: 450px;


height: 380px;


border: 1px solid black


display: block;


}


span.button {


position: absolute;


left: 0;


top: 0;


background-color: black;


padding: 5px 10px 5px 10px;


color: white;


cursor: pointer;


}


div.close {


display: none;


}


</style>


<script type="text/javascript">


$(function(){


$('#list div').each(function() {


$(this).append('<span class="button">Close</span>');


});


$("span.button").click(function() {


$(this).closest("li").children("div").toggleClass("close");


});


});


</script>


</head>


<body>


<ul id="list">


<li>


<div>


<iframe src="[URL='https://lumtu.com/yti/cgaagcGdodHRwOi8vdGhpbmtzdG9ja3Bob3Rvcy5jby51ay9DTVMvU3RhdGljQ29udGVudC9IZXJvL1RTX0Fub25IUF80NjI4ODI0OTVfMDEuDMf']http://www.thinkstockphotos.co.uk/CMS/StaticContent/Hero/TS_AnonHP_462882495_01.jpg[/URL]" scrolling="no" frameborder="0"></iframe>


</div>


</li>


</ul>


</body>


</html>

Код (разметка):

Похожие темы	Дата
[Специалист] JavaScript. Уровень 1 + Уровень 2	19.10.2024, 18:10
Ng-book 1.4: The Complete Book On Angularjs	19.10.2024, 18:10
[Мартин Фаулер] Рефакторинг кода на Javascript. Улучшение проекта существующего кода (2019)	19.10.2024, 18:10
[Максим Лескин] Калькулятор для сайта на JavaScript (2019)(Glo Academy)	19.10.2024, 18:10
[специалист] Javascript. Уровень 1. Основы Веб - Программирования 2009	19.10.2024, 18:10
[Владилен Минин] React Native 2020. Мобильная разработка на JavaScript (курсы)	19.10.2024, 18:10
Как я могу вернуть Observable of IEmployees с ProductName из allProducts$ в RXJS?	19.10.2024, 18:10
JаvaScript и jQuery. Исчерпывающее руководство - Дэвид Макфарланд (2015)	19.10.2024, 18:10
(Свежак) Разработка enterprise Angular.JS приложения	19.10.2024, 18:10
JavaScript. Интенсивный курс для верстальщиков - Лаврик (2017)	19.10.2024, 18:10

Закрытие iframe от родителя или дочернего элемента. Как?

LongWayXD

ray1

MaZa_Mladwii

I AM

Интересно