Change src of iframe

[NLCJ]

Hello,

I've been creating an upload script, and it's going great so far after big problems. But now the final touch... I want to change the src of an iframe when the button is pressed. I got this:

function uploadfile() {
document.getElementById('uploadform').style.display="none";
document.getElementById('uploadprogress').style.display="block";
document.getElementById('uploadprogress').src="uploadprogress.php?id=test";
}

The .style.display part works fine. The iframe is being displayed, however the URL is not changed...

 

Am I doing something wrong?! What?!

[Adam]

You need to treat the iframe object like a window object. I.e. you don't update the HTML attribute, but the window's .location.href property:

 

document.getElementById('uploadprogress').location.href="uploadprogress.php?id=test";

[NLCJ]

Somehow, this still isn't working. I set the default src to "about:blank", is this a problem?

[Adam]

Ah. Turns out you can't get the element by it's ID, you have to reference it's name:

 

window.iframe_name.location.href="uploadprogress.php?id=test";

 

Which makes sense I guess. document.getElementById() returns a DOM element object, where-as the iframe's part of the window object.

[NLCJ]

I can't get it to work. I've set it like this:

iFrame code:

<iframe name="uploadprogress" id="uploadprogress" style="display: none; border: none; width: 100%; height: 300px;" src="about:blank"><p>Your browser doesn't support iFrames...</p></iframe>

JavaScript code:

function uploadfile() {
document.getElementById('uploadform').style.display="none";
document.getElementById('uploadprogress').style.display="block";
window.uploadprogress.location.href="uploadprogress.php?id=test";
}

Like before, the style.display works, but the window.uploadprogress doesn't...

[NLCJ]

JavaScript is now acting really weird, I've got no clue what happened but no script works anymore... Even the scripts that I didn't modify! I've set it like:

function verifyfile() {
			var ext = $('#file').val().split('.').pop().toLowerCase();
			if($.inArray(ext, ['avi','mpg','mpeg','wmv','mov','vob','flv']) != -1) {
			    document.getElementById('errorextension').style.display="none";
			    document.getElementById('uploadbutton').style.display="block";
			} else {
			    document.getElementById('errorextension').style.display="block";
			    document.getElementById('uploadbutton').style.display="none";
			}
		}
		function uploadfile() {
			document.getElementById('uploadform').style.display="none";
			document.getElementById('processing').style.display="block";
			setTimeout(uploadstarted(),10000);
		}
		function uploadstarted() {
			document.getElementById('uploadprogress'.style.display="block;
			document.getElementById('processing').style.display="none";
		}

verifyfile() is called when the file is changed in the form, it worked fine until now. Now nothing works, even though I didn't touch that part... Does anyone know what happened or how I can solve this? I'm pretty new in JavaScript, maybe it's a silly mistake or so...

[NLCJ]

The Chrome inspector - or whatever it's called - helped me a lot. It seems I forgot a ")", what caused all scripts to fail within those tags (I guess that makes sense?). Now the only thing that isn't working is changing the href. But I think I will figure something out, I will keep you guys updated.

[NLCJ]

Solved.

I've got an idea what happened, but that would take 15 minutes to explain why it works this way. I will skip this part; solution: Add a timer before displaying the iframe.

setTimeout("uploadstarted()",10000);