Use Javascript variable in iframe src ??

dookjam · 02-16-2012, 12:24 PM

Hi, new to the forum (and Javascript coding). I hope someone can help as this is driving me nuts...

I want my website to display the content of another webpage in an iframe. the other webpage extension will change each day (e.g. 'www.example.com/16_02_2012.html' would be today's file to view, 'www.example.com/15_02_2012.html' would have been yesterday's etc.).

I have worked out some code to grab today's date and create the web address as a variable. how do i then use that variable in the <iframe src="??"> when someone click a link to "update the iframe"?

Here is my code so far... I would really appreciate some help!!! :s

<html>
<script>

function getMonth() {
var now = new Date();
var month = now.getMonth();
return month < 10 ? "0" + (month+1) : month+1;
}

function getDay() {
var now = new Date();
var day = now.getDate();
return day < 10 ? "0" + (day) : day;
}

var month = getMonth();
var day = getDay();
var year=new Date();
var address = "http://www.example.com/" + day + "_" + month + "_" + year.getFullYear() + ".html";

function iFrameWrite(id, url){
document.getElementById(id).src = url;
}

</script>

<iframe id="info" width="800px" height="800px"></iframe><br />

<a href="#" onclick="javascript:iFrameWrite('info', 'address')">Update the Iframe</a>

</html>

devnull69 · 02-16-2012, 12:33 PM

You almost had it :-)

Code:

function iFrameWrite(id){
   var month = getMonth();
   var day = getDay();
   var year=new Date();
   var address = "http://www.example.com/" + day + "_" + month + "_" + year.getFullYear() + ".html";
   document.getElementById(id).src = address;
}

<a href="#" onclick="javascript:iFrameWrite('info')">Update the Iframe</a>

dookjam · 02-16-2012, 03:21 PM

hi, thanks for this. it works perfectly. i know i'm probably just doing stupid things, but i think im following my book correctly but this next thing doesn't work now. i want to add another variable into the web address.

so i've made a dropdown list so the user can select something, then i just want it to make that value a variable named "pos". so i've done.

function position(){
var pos = getElementById('position').value;
}

<form id="position">
<select id="position" onclick="position()">
<option></option>
<option value="1">Position 1</option>
<option value="2">Position 2</option>
</select>
</form>

im not sure if that's working, because i then run the other function (which updates the iframe) with my new variable included and it returns an error. the other function is the same.

function iFrameWrite(){
var month = getMonth();
var day = getDay();
var year=new Date();
var address = "http://www.example.com/" + pos + day + "_" + month + "_" + year.getFullYear() + ".html";
document.getElementById(id).src = address;
}

??? am i a million miles away? thanks in advance!! :s

devnull69 · 02-16-2012, 03:28 PM

Nope, you aren't

1. With the "var" keyword you are defining "pos" as a local variable to the function position(). Just omit the "var" and it will be global. You need it to be global in order to access it later from iFrameWrite()

2. You should use onchange="..." instead of onclick="..." for <select> elements

3. It's document.getElementById() and not only getElementById()

xelawho · 02-16-2012, 03:58 PM

I would also question the wisdom of having a function named "position" as well as using "position" for your form and select id's.

well, firstly, two elements with the same id is illegal html and bound to get you in trouble at some point.

and from what I recall, having a function and an element id with the same name makes IE wet its pants.

javascript is case sensitive, remember, so you can even get away with this if you're completely out of ideas:

Code:

function posiTion(){
var pos = document.getElementById('positiOn').value;
}

<form id="poSition">
<select id="positiOn" onclick="posiTion()">

although I prefer to make things more understandable:

Code:

function getPosition(){
var pos = document.getElementById('selpos').value;
}

<form id="posform">
<select id="selpos" onclick="getPosition()">

although really your getPosition function doesn't do a whole lot - you could just as easily do

Code:

function iFrameWrite(){
var pos = document.getElementById('selpos').value;
var month = getMonth();
var day = getDay();
var year=new Date();
var address = "http://www.example.com/" + pos + day + "_" + month + "_" + year.getFullYear() + ".html";
document.getElementById(id).src = address;
}

meaning you can scrap the getPosition function altogether and keep "pos" as a local variable