2015-05-07 2 views
4

Я работаю над приложением с модальными оверлеями, которые появляются в iFrames при нажатии соответствующих кнопок. Для того, чтобы закрыть одну из этих модальных накладок, кнопка Отмены определяются в родительском окне таким образом:Закрытие iFrame через Javascript

<a href="#close" class="modalButton">Cancel</a> 

я хотел бы заменить это с помощью функции JavaScript (назовем его OnCancel()), так что я могу сбросить некоторые значения, если необходимо, в дополнение к закрытию наложения. Что такое эквивалент JavaScript для «#close»?

+0

Не уверен, что вы подразумеваете под «закрытием» iFrame, разве вы не можете просто удалить элемент? – adeneo

+0

'href =" # close "' это просто ссылка, которая перескакивает на 'close'-anchor (' name = "close" '). Если это делает что-то еще, происходит другой запуск кода при нажатии. – Halcyon

+0

'# close' не будет« закрывать »iframe (по которому я предполагаю, что вы имеете в виду« удалить его из DOM »). Это ссылка на элемент с 'id = close'. Вероятно, у вас уже есть перехват JavaScript, чтобы получить желаемый эффект, но мы не видим этого JS. – Quentin

ответ

0

Подход, который работает для меня определить следующую функцию JavaScript в родительской странице:

function onCancel() 
{ 
    var myIFrame = document.getElementById("myIFrame"); 
    var myForm = myIFrame.contentDocument.myForm; 
    var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged; 
    if (stuffWasChanged == "true") 
     myForm.action = "reset.do"; 

    myForm.submit(); 
    location.href = '#'; 
    } 

Обратите внимание, что если stuffWasChanged флаг не был установлен так, то никаких действий не Defi для формы, о которой идет речь, поэтому модальное наложение просто исчезает без вызова метода сервлета.

0
<!DOCTYPE html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
    .top { 
     height:100px; 
     width:200px; 
     background-color:green; 
    } 
    </style> 
    <script type="text/javascript"> 
    function removeIFrame() { 
     var frame = document.getElementById("target"); 
     frame.parentNode.removeChild(frame); 
    } 
    </script> 
</head> 
<body> 
    <div class="top" onclick="removeIFrame();"></div> 
    <iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe> 
    <div class="top"></div> 
</body> 
2

Вы не можете закрыть iFrame, вам либо нужно его удалить, либо спрятать. В приведенном ниже примере удаляется iframe. Если вы просто хотите скрыть, вы можете заменить последнюю строку (содержащую removeChild с этим frame.style.display="none"; Вы можете получить его обратно, используя эту строку frame.style.display="block";

<!DOCTYPE html> 
 

 
<head> 
 
    <title>test</title> 
 
    <style type="text/css"> 
 
    .top { 
 
     height: 100px; 
 
     width: 200px; 
 
     background-color: blue; 
 
    } 
 
    </style> 
 
    <script type="text/javascript"> 
 
    function removeIFrame() { 
 
     var frame = document.getElementById("iframe"); 
 
     frame.parentNode.removeChild(frame); 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <div class="top" onclick="removeIFrame();"></div> 
 
    <iframe id="iframe" src="/" width="200" height="100"></iframe> 
 
    <div class="top"></div> 
 
</body>

+0

Спасибо за ваш ответ. Я придумал альтернативное решение: поскольку я планирую установить действие формы, отправьте его, чтобы вызвать метод сервлета, чтобы сбросить значения, если некоторые из них изменились, в случае, когда ни один из них не изменился, я просто оставлю действие пустым. .. –

+0

На самом деле, теперь, когда я пробовал ваш подход, я вижу, что он работает слишком хорошо для моей ситуации, поскольку после того, как iFrame будет удален, он не может быть восстановлен ... –

+1

В этом случае просто замените это самая последняя строка кода с frame.style.display = "none"; Затем, когда вы хотите, чтобы его обратно заменили на .style.display = "block" – DasBeasto

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