By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,812 Members | 863 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,812 IT Pros & Developers. It's quick & easy.

IE + Iframe popup problem

P: n/a
XP
Hello Everyone,

I was stuck with this really frustrating problem for sometime. Let me
explain what I am trying to achieve: There is a form and an inner
iframe. The form's target is set to the iframe so that when the form
is submitted, the page does not get reloaded/changed ( as the iframe
would be the one getting refreshed. The Iframe is set to have 0 width
and height to make it look invisible ).

I have a copied the html source ( at the end ) to demonstrate this.
There are 2 form/iframe pair
a) Static form / iframe
b) Javascript generated form / iframe.
and both forms are submitted using javascript.

In firefox, both a) and b) works perfectly ( i.e there are no
popups / page reloads/ page change )
In IE, a) works fine BUT b) does not ( a popup is created when the
form is submitted )

I am failing to understand why b) is not working in IE ( i.e why
the popup is appearing ).
Could someone help me on this one ?

Thanks

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function badTest ( ) {
//document.getElementById ('upload_form_1234').submit();
document.forms['upload_form_1234'].submit();
}

function goodTest ( ) {
document.getElementById ('asd').submit();
}

function tryLoad ( ) {
var newDiv = document.createElement('div');
var newForm = document.createElement('form');
var uniqueId = '1234' ;
newForm.setAttribute('enctype','multipart/form-data') ;
newForm.setAttribute('id','upload_form_' + uniqueId ) ;
newForm.setAttribute('name','upload_form_' + uniqueId ) ;
newForm.setAttribute('method','post' ) ;
newForm.setAttribute('action','index.php/media/upload') ;
newForm.setAttribute('target','form_' + uniqueId + '_iframe') ;

var fileElement = document.createElement('input');
fileElement.setAttribute('type','file') ;
fileElement.setAttribute('id','image_file') ;
fileElement.setAttribute('name','image_file') ;
newForm.appendChild(fileElement);
newDiv.appendChild(newForm);

var iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('name','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('id','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('src','public/html/blank.html') ;
iFrameElement.setAttribute("style","border:0px;hei ght:0px;width:
0px;padding:0px;position:absolute");
iFrameElement.style.border = 0 ;
iFrameElement.style.height = 0 ;
iFrameElement.style.width = 0 ;
iFrameElement.style.padding = 0 ;
iFrameElement.style.position = 'absolute' ;
newDiv.appendChild(iFrameElement);
document.getElementById ('uploadForms').appendChild ( newDiv ) ;
}
</script>
</head>
<body onload="tryLoad()">
<button onclick="goodTest()"Good Test </button>
<form id="asd" enctype="multipart/form-data" method="post"
action="index.php" target="testframe">
<input type="file">
</form>
<iframe name="testframe" id="testframe" src="public/html/blank.html"
style="border:0;height:0;width:0;padding:0;positio n:'absolute' " >
</iframe>
<br/><br/><br/>
<button onclick="badTest()"Bad IE Test </button>
<div id="uploadForms"</div>
</body>
</html>

Apr 18 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
On Apr 18, 8:04 pm, XP <rakes...@gmail.comwrote:
Hello Everyone,

I was stuck with this really frustrating problem for sometime. Let me
explain what I am trying to achieve: There is a form and an inner
iframe. The form's target is set to the iframe so that when the form
is submitted, the page does not get reloaded/changed ( as the iframe
would be the one getting refreshed. The Iframe is set to have 0 width
and height to make it look invisible ).

I have a copied the html source ( at the end ) to demonstrate this.
There are 2 form/iframe pair
a) Static form / iframe
b) Javascript generated form / iframe.
and both forms are submitted using javascript.

In firefox, both a) and b) works perfectly ( i.e there are no
popups / page reloads/ page change )
In IE, a) works fine BUT b) does not ( a popup is created when the
form is submitted )

I am failing to understand why b) is not working in IE ( i.e why
the popup is appearing ).
Could someone help me on this one ?

Thanks

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Insert title here</title>
<script>
function badTest ( ) {
//document.getElementById ('upload_form_1234').submit();
document.forms['upload_form_1234'].submit();
}

function goodTest ( ) {
document.getElementById ('asd').submit();
}

function tryLoad ( ) {
var newDiv = document.createElement('div');
var newForm = document.createElement('form');
var uniqueId = '1234' ;
newForm.setAttribute('enctype','multipart/form-data') ;
newForm.setAttribute('id','upload_form_' + uniqueId ) ;
newForm.setAttribute('name','upload_form_' + uniqueId ) ;
newForm.setAttribute('method','post' ) ;
newForm.setAttribute('action','index.php/media/upload') ;
newForm.setAttribute('target','form_' + uniqueId + '_iframe') ;

var fileElement = document.createElement('input');
fileElement.setAttribute('type','file') ;
fileElement.setAttribute('id','image_file') ;
fileElement.setAttribute('name','image_file') ;
newForm.appendChild(fileElement);
newDiv.appendChild(newForm);

var iFrameElement = document.createElement('iframe');
iFrameElement.setAttribute('name','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('id','form_' + uniqueId +
'_iframe') ;
iFrameElement.setAttribute('src','public/html/blank.html') ;
iFrameElement.setAttribute("style","border:0px;hei ght:0px;width:
0px;padding:0px;position:absolute");
iFrameElement.style.border = 0 ;
iFrameElement.style.height = 0 ;
iFrameElement.style.width = 0 ;
iFrameElement.style.padding = 0 ;
iFrameElement.style.position = 'absolute' ;
newDiv.appendChild(iFrameElement);
document.getElementById ('uploadForms').appendChild ( newDiv ) ;
}
</script>
</head>
<body onload="tryLoad()">
<button onclick="goodTest()"Good Test </button>
<form id="asd" enctype="multipart/form-data" method="post"
action="index.php" target="testframe">
<input type="file">
</form>
<iframe name="testframe" id="testframe" src="public/html/blank.html"
style="border:0;height:0;width:0;padding:0;positio n:'absolute' " >
</iframe>
<br/><br/><br/>
<button onclick="badTest()"Bad IE Test </button>
<div id="uploadForms"</div>
</body>
</html>
try not using setattribute on the iframe for the name attribute,
instead after it has been created, set the name property the old
fashioned way. using
obj.name='form_' + uniqueId + '_iframe'
format, ie6 has trouble with setattribute.
the "popup" is just the new window created when posting to a window
whose name isnt available yet, once you set it using the name
attribute the old way, it will exist and will be posted to with no
need for a new window. up with firefox and those browsers which make
an effort.

Apr 19 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.