Setting iframe name in script

[Christopher J. Hahn]

I'm trying to use a script-generated form to submit to a
script-generated iframe. The problem I'm running into is that the
iframe is not assuming the name I assign it.

IE6 on Win2000. FF1.0.2+ doesn't seem to have the problem.

I'm doing:
this.iframe = document.createElement( 'iframe' );
this.iframe.id = this.id + 'wh';
this.iframe.style.display = 'none';
this.iframe.name = this.iframe.id; // <---

// snippage, including generation of the form

this.form.target = this.iframe.name;
this.form.appendChild( this.iframe );


However, when I submit the form it opens in a new window.
When I alert( document.body.innerHTML ), I am being told:

<IFRAME id=dr436929wh></IFRAME>
[sic]
i.e. no "name" attribute (hence the new window).


What I've already tried:
* Setting the iframe.name attribute only after
this.form.appendChild( this.iframe )

* Using this.iframe.setAttribute( name, ... ) prior to and after the
appendChild

* Setting this.form.target = this.iframe (just for the hell of it)


Thanks in advance. I know you guys are good. Let me know if you need
more info.

 

[verymicrochip]

Just use the "id" tag, and not the name tag. Refer to it as
dr436929wh.location.href = "Whatever". Or, you can assign it's name
like this: dr436929wh.name = "Something". Try that and see if it works.

 

[verymicrochip]

Just use the "id" tag, and not the name tag. Refer to it as
dr436929wh.location.href = "Whatever". Or, you can assign it's name
like this: dr436929wh.name = "Something". Try that and see if it works.

 

[Martin Honnen]

I'm trying to use a script-generated form to submit to a
script-generated iframe. The problem I'm running into is that the
iframe is not assuming the name I assign it.

IE6 on Win2000. FF1.0.2+ doesn't seem to have the problem.

I'm doing:
this.iframe = document.createElement( 'iframe' );
this.iframe.id = this.id + 'wh';
this.iframe.style.display = 'none';
this.iframe.name = this.iframe.id; // <---

// snippage, including generation of the form

this.form.target = this.iframe.name;
this.form.appendChild( this.iframe );


However, when I submit the form it opens in a new window.
When I alert( document.body.innerHTML ), I am being told:

<IFRAME id=dr436929wh></IFRAME>
[sic]
i.e. no "name" attribute (hence the new window).

This is a known and documented shortcoming of IE on Win that can be
quite crippling to any effort to elegantly use DOM scripting in the
browser. For some reasons setting the name property (e.g. element.name =
expression) or name attribute (e.g. element.setAttribute('name',
expression) on a dynamically created element does not work in IE/Win so
you are forced to use the very ugly IE specific workaround of doing
var iframe = document.createElement('<iframe name="iframeName">')
However some browsers (notably Mozilla) will throw an error on that
argument to createElement so you have to use try/catch e.g.
var iframeName = 'iframeName';
var iframe;
// try IE way first
try {
iframe = document.createElement('<iframe name="' + iframeName + '">');
}
catch (e) {
iframe = document.createElement('iframe');
iframe.name = iframeName;
}
// now deal with browsers like Opera with do not throw an error
// but might return null or an unusable element
if (!iframe || iframe.tagName.toLowerCase() != 'iframe' ||
iframe.name != iframeName) {
iframe = document.createElement('iframe');
iframe.name = iframeName;
}
// now use iframe element here further

 

[Christopher J. Hahn]

Just use the "id" tag, and not the name tag. Refer to it as
dr436929wh.location.href = "Whatever". Or, you can assign it's name
like this: dr436929wh.name = "Something". Try that and see if it works.

Micro: Thanks for the response. I tried a couple variants of your
suggestion but it refused to set the name attribute. Unfortunately,
this is a must as the form will often require POST for Apache logging
reasons. I ended up directly modifying the form's innerHTML as an IE
special case to put the iframe in there, name="..." included.

Thanks again.

 

[Christopher J. Hahn]

I'm trying to use a script-generated form to submit to a
script-generated iframe. The problem I'm running into is that the
iframe is not assuming the name I assign it.

IE6 on Win2000. FF1.0.2+ doesn't seem to have the problem. [snip]

However, when I submit the form it opens in a new window.
When I alert( document.body.innerHTML ), I am being told:

<IFRAME id=dr436929wh></IFRAME>
[sic]
i.e. no "name" attribute (hence the new window).

This is a known and documented shortcoming of IE on Win that can be
quite crippling to any effort to elegantly use DOM scripting in the
browser. For some reasons setting the name property (e.g. element.name =
expression) or name attribute (e.g. element.setAttribute('name',
expression) on a dynamically created element does not work in IE/Win so
you are forced to use the very ugly IE specific workaround of doing
var iframe = document.createElement('<iframe name="iframeName">')

Nice trick-- I like that one much better than what I ended up using.
I'm going to give this a shot because it's far more elegant than
appending the iframe tag to the form's innerHTML.

IE didn't have a problem setting the names of form fields, so I'm
wondering if this is a case of "If it has an ID, what's it need a name
for?" or whether form fields are a special case (for obvious reasons).

However some browsers (notably Mozilla) will throw an error on that
argument to createElement so you have to use try/catch e.g.
var iframeName = 'iframeName';
var iframe;
// try IE way first
try {
iframe = document.createElement('<iframe name="' + iframeName + '">');
}
catch (e) {
iframe = document.createElement('iframe');
iframe.name = iframeName;
}
// now deal with browsers like Opera with do not throw an error
// but might return null or an unusable element
if (!iframe || iframe.tagName.toLowerCase() != 'iframe' ||
iframe.name != iframeName) {
iframe = document.createElement('iframe');
iframe.name = iframeName;
}
// now use iframe element here further

Excellent suggestion, and I will be trying it out. If you're
interested, I'll post the results of my attempts.

This what I'm using now (with impertinent code snipped):
this.id = 'dr' + Math.round( Math.random() * 1000000 );
this.iframe = document.createElement( 'iframe' );
this.iframe.id = this.id + 'wh';
this.iframe.style.display = 'none';
this.iframe.name = this.iframe.id;

this.form = document.createElement( 'form' );
this.form.target = this.iframe.name;
this.form.id = this.id + 'f';

if( document.all ) {
this.form.innerHTML += '<iframe id="' + this.iframe.id +
'" name="' + this.iframe.id +
'" style=display:none;></iframe>';

} else
this.form.appendChild( this.iframe );


Inelegant, but it works.

 

[Martin Honnen]

Christopher J. Hahn wrote:

This what I'm using now (with impertinent code snipped):
this.id = 'dr' + Math.round( Math.random() * 1000000 );
this.iframe = document.createElement( 'iframe' );
this.iframe.id = this.id + 'wh';
this.iframe.style.display = 'none';
this.iframe.name = this.iframe.id;

this.form = document.createElement( 'form' );
this.form.target = this.iframe.name;
this.form.id = this.id + 'f';

if( document.all ) {
this.form.innerHTML += '<iframe id="' + this.iframe.id +
'" name="' + this.iframe.id +
'" style=display:none;></iframe>';

I would change that to
if (this.form.insertAdjacentHTML) {
this.form.insertAdjacentHTML(
'beforeEnd',
'<iframe id="' + ... + '<\/iframe>'
)
}
else {
this.form.appendChild(this.iframe);
}
as IE's DOM (and even other browsers like Opera emulating IE's DOM) has
insertAdjacentHTML to efficiently parse a snippet of HTML and insert the
resulting nodes whereas your approach of innerHTML += requires reparsing
the existing content.

 

[Martin Honnen]

IE didn't have a problem setting the names of form fields, so I'm
wondering if this is a case of "If it has an ID, what's it need a name
for?" or whether form fields are a special case (for obvious reasons).

The problem with name exists for form controls too e.g. try

var form = document.createElement('form');
var input = document.createElement('input');
input.name = 'inputName';
form.appendChild(input);
alert(form.innerHTML)

with IE/Win and you see that the name attribute is not there. But
somehow IE manages to submit those form controls properly nevertheless
so you only run into problems when you want to access them by script
where you often get away with setting the id besides the name.