Проблема IE: Представление формы к iframe использование JavaScript
Я пытался создать iframe элемент с помощью JavaScript, как так:
var iframe = document.createElement('iframe');
iframe.setAttribute('name', 'frame_x');
Однако, когда я пытался отправить форму с помощью недавно созданного iframe в качестве цели, IE открывает новое окно, вместо того, чтобы использовать iframe.
form.setAttribute('target', 'frame_x');
form.submit();
Это работает отлично в Firefox. Кроме того, iframe создается, но не используется.
2 ответа
Вы столкнулись с ошибкой в Internet Explorer .
Вы НЕ МОЖЕТЕ установить атрибут имени ЛЮБОГО элемента в IE, используя стандартный метод DOM .setAttribute ('name', value);
В IE (до версии 8, работающей в стандартном режиме IE8) этот метод не будет работать для установки атрибута name.
Вам нужно использовать одно из следующего:
//A (any browser)
var iframe = document.createElement('iframe');
iframe.name = 'frame_x';
//B (only in IE)
var iframe = document.createElement('<iframe name="frame_x"/>');
//C (use a JS library that fixes the bug (e.g. jQuery))
var iframe = $('<iframe name="frame_x"></iframe>');
//D (using jQuery to set the attribute on an existing element)
$('iframe:first').attr('name','frame_x');
Добро пожаловать в SO.
Одна из проблем, которую я видел в вашем коде, заключается в том, что вы никогда на самом деле не отображаете ифрейм. Чтобы он появился на странице, вы должны вставить его в документ. В моем примере я создаю тег , чтобы действовать в качестве слота, в который будет вставлен ифрейм.
Посмотрим, сделает ли это то, что вы ищете.
<!-- http://stackoverflow.com/questions/2181385/ie-issue-submitting-form-to-an-iframe-using-javascript -->
<html>
<head>
<script type="text/javascript">
function submitFormToIFrame(){
var form=document.getElementById('myform');
form.setAttribute('target', 'frame_x');
form.submit();
}
</script>
</head>
<body>
<h1>Hello Erwin!</h1>
<form id="myform" name="myform" action="result.html">
<input type="button" value="Submit the Form" onClick="submitFormToIFrame();">
</form>
<span id="iframeSlot">
<script type="text/javascript">
var iframe = document.createElement('iframe');
iframe.setAttribute('name', 'frame_x');
document.getElementById('iframeSlot').appendChild(iframe);
</script>
</span>
</body>
</html>
UPDATE:
Я обнаружил, что это решение работает только в Firefox. Поэтому я провел эксперимент. Похоже, что если вы определите iframe в html (вместо генерации через JS/DOM), то это сработает. Вот версия, которая работает с IE и Firefox:
<html>
<head>
<script type="text/javascript">
function submitFormToIFrame(){
//IE
if( document.myform ){
document.myform.setAttribute('target','frame_x');
document.myform.submit();
//FF
} else {
var form=document.getElementById('myform');
form.setAttribute('target', 'frame_x');
form.submit();
}
}
</script>
</head>
<body>
<h1>Hello Erwin!</h1>
<form id="myform" name="myform" action="result.html" target="">
<input type="button" value="Submit the Form" onClick="submitFormToIFrame();">
</form>
<span id="iframeSlot">
<iframe name="frame_x">
</iframe>
</span>
</body>
</html>