...

View Full Version : Loading an Iframe using a text field



Jacka
01-04-2007, 08:59 PM
I would like this website to have many links in the javascript, and load the one with the corresponding number to the one the user inputs.

I may have completely the wrong approach to this idea.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>JackaSwitch</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function doLoad(objCheck){
if (objCheck.54){
document.getElementById("rs").src.http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0;
}
}
</script>

</head>

<body bgcolor="#DFDFDF">

<fieldset>
<legend>
World selector
</legend>
<form action="">
<input type="text" maxlength="3" size="1">
<input type="submit" value="Load" onclick="doLoad(this)">
</form>
</fieldset>

<br />

<div id="rs">
<iframe name="rs" width="767" height="531" frameborder="0"></iframe>
</div>

</body>

</html>

Mr J
01-04-2007, 09:18 PM
You could try something on these lines, just add your numbers and urls to the array


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>JackaSwitch</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">

urls=[
["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0"],
["36","table.htm"]

]


function doLoad(objCheck){

for(var i=0;i<urls.length;i++){

if(urls[i][0]==document.myform.t1.value){

window.frames["rs"].location=urls[i][1]
}

}

}
</script>

</head>

<body bgcolor="#DFDFDF">

<fieldset>
<legend>
World selector
</legend>
<form name="myform">
<input type="text" name="t1" maxlength="3" size="1">
<input type="button" value="Load" onclick="doLoad()">
</form>
</fieldset>

<br />

<div id="rs">
<iframe name="rs" width="767" height="531" frameborder="0"></iframe>
</div>

</body>

</html>

Jacka
01-04-2007, 09:46 PM
Thanks, that works very well.

Would you mind explaining how this script actually works?

I'm keen to learn some more javascript myself, the logic behind it just takes a bit of getting used to.

Thompson
01-04-2007, 10:21 PM
I won't explain the script, but I'll give you a nice way to learn how javascript works:

1- Install Visual Studio 6.0 or higher;
2- In Internet Explorer, go Tools->Internet Optioins->Advanced->Navitagion. Unmark the checkbox "Disable scripting debugging"
3- Force an error in your browser and choose "Yes" to debug the application.

Debugging a js script in Visual Studio can be very useful, because you can see almost all the properties that any HTML contains. And i think the properties showed works in all browsers.
I knows that this works in I.E., but I didn't tested yet in firefox.

The steps described by me just allow you to debug the javascript code that you have. Probally there are another debugging tools around, but this is a way to see what you can do with an HTML element.

I don't know what the rest think about it, but i'm saying this because for me is very useful. Anyone knows that a html comment tag "<!-- -->" is accessible by javascript? It can have an id, name, or whatever you want...

Try to debug a script and you'll discover a world of things that some tutorials don't explain.

Jacka
01-05-2007, 10:20 AM
Thanks.

P.s. It works perfectly in all my browsers, including firefox.

Jacka
01-05-2007, 07:43 PM
I just found a problem actually.

When you press return on the keyboard instead of clicking the Load button, it doesn't load the world, but just changes the URL to filename.html?w=number.

Is there a way to cure this?

Mr J
01-05-2007, 08:12 PM
Give this a try


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>JackaSwitch</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">


urls=[ // input number and its url
["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0"],
["36","table.htm"]

]


function doLoad(){

for(var i=0;i<urls.length;i++){ // loop through the array

if(urls[i][0]==document.myform.t1.value){ // if number in array matches input value

window.frames["rs"].location=urls[i][1] // go to appropriate url
}

}

}

function chkKey(e){
keycode=(!e?event.keyCode:e.which) // get code for key pressed
if(keycode==13){ // if return key
doLoad() // run function
}
}

document.onkeyup=chkKey
</script>

</head>

<body bgcolor="#DFDFDF">

<fieldset>
<legend>
World selector
</legend>
<form name="myform" onsubmit="return false">
<input type="text" name="t1" maxlength="3" size="1">
<input type="button" value="Load" onclick="doLoad()">
</form>
</fieldset>

<br />

<div id="rs">
<iframe name="rs" width="767" height="531" frameborder="0"></iframe>
</div>

</body>

</html>

Jacka
01-06-2007, 05:45 PM
Thank you very much indeed, you're been a great help. :)

What does onsubmit="return false" in the <form> actually do, and how would I make it navigate to an error page (or any page) if the number they input doesn't correspond to a URL?

Mr J
01-06-2007, 06:41 PM
Using submit button or the return key submits the form, when a form is submitted the page is refreshed.

Because you are not using the form to submit data for processing you do not want the page to refresh so the return false prevents this.

I have amended the script to redirect to another page if a wrong number is entered.

Look for this line

window.frames["rs"].location="errorpage.htm"

and change errorpage.htm to your own


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>JackaSwitch</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">


urls=[ // input number and its url
["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0"],
["36","table.htm"]

]


function doLoad(){
isOk=false

for(var i=0;i<urls.length;i++){ // loop through the array

if(urls[i][0]==document.myform.t1.value){ // if number in array matches input value
window.frames["rs"].location=urls[i][1] // go to appropriate url

isOk=true
}

}

if(!isOk){
window.frames["rs"].location="errorpage.htm"
}

}

function chkKey(e){
keycode=(!e?event.keyCode:e.which) // get code for key pressed
if(keycode==13){ // if return key
doLoad() // run function
}
}

document.onkeyup=chkKey
</script>

</head>

<body bgcolor="#DFDFDF">

<fieldset>
<legend>
World selector
</legend>
<form name="myform" onsubmit="return false">
<input type="text" name="t1" maxlength="3" size="1">
<input type="button" value="Load" onclick="doLoad()">
</form>
</fieldset>

<br />

<div id="rs">
<iframe name="rs" width="767" height="531" frameborder="0"></iframe>
</div>

</body>

</html>

Jacka
01-06-2007, 09:06 PM
Thank you very much indeed, if I have any more queries, I will post them here. :)

EDIT: Just found something, when you open the page, it automaticly thinks that you've put an invalid number in, and opens the error page in the iframe, any ideas of a way around this?

ANOTHER EDIT: Nevermind, it seems to have stopped doing it now...

Jacka
01-14-2007, 06:41 PM
I'm back with another question!

Is it possible to have 2 possible URLs for each number, but load it depending on whether a checkbox is ticked or not?

Mr J
01-14-2007, 08:06 PM
Give the following a try



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

<head>

<title>JackaSwitch</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">


urls=[ // input number and its url
["54","http://ams6.runescape.com/lang/en/aff/runescape/game.ws?lowmem=0&plugin=0","optionalpage.htm"],
["36","table.htm",""] // if no optional page leave the last quotes empty

]


function doLoad(){
isOk=false

for(var i=0;i<urls.length;i++){ // loop through the array

if(urls[i][0]==document.myform.t1.value){ // if number in array matches input value

if(!document.myform.c1.checked){
window.frames["rs"].location=urls[i][1] // go to appropriate url
}
else{
window.frames["rs"].location=urls[i][2] // go to appropriate url
}

isOk=true
}

}

if(!isOk){
window.frames["rs"].location="errorpage.htm"
}

}

function chkKey(e){
keycode=(!e?event.keyCode:e.which) // get code for key pressed
if(keycode==13){ // if return key
doLoad() // run function
}
}

document.onkeyup=chkKey
</script>

</head>

<body bgcolor="#DFDFDF">

<fieldset>
<legend>
World selector
</legend>
<form name="myform" onsubmit="return false">
<input type="text" name="t1" maxlength="3" size="1">
<input type="checkbox" name="c1">
<input type="button" value="Load" onclick="doLoad()">
</form>
</fieldset>

<br />

<div id="rs">
<iframe name="rs" width="767" height="531" frameborder="0"></iframe>
</div>

</body>

</html>

Jacka
01-15-2007, 06:42 PM
I've made this into tables now, and was wondering whether there's some way to make an iframe inside a cell that will have the largest possible dimensions?
I know you can have width="*" for frames, with basicly means "the rest of the page".

Mr J
01-15-2007, 06:54 PM
In the iframe try width=100%

Jacka
01-15-2007, 08:14 PM
This isn't really Javascript, but maybe you can help.

http://img61.imageshack.us/img61/8205/tablesuy1.png

Any ideas on how I would achieve that?

Jacka
01-22-2007, 03:02 PM
Hmm, I decided to use frameset instead of tables.

Also, would it be possible to use javascript to pop up an error when F5 is pressed, or would the browser not allow this?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum