Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Link to a webpage and reload contents of frame on that page

    I have a website with hundreds of pages all designed to be displayed in iframes on 5-6 pages.

    I now have to link to my "Parent" page and open a specific page in the iframe on that page. All via the link.

    Example:
    My website is 5 pages:
    Page 1 is index, page 2 is my template "Parent" page containing an iframe named "myframe", and pages 3-5 are image pages designed to be displayed in the "parent" page "myframe"

    I need to link from my index page to page 2 "Parent" and have it load page 4 in "myframe" (the default would be page 3)
    Here is the code I have tried
    Code:
    <a href="http://www.signstopusa.com/car%20magnets.htm#myframe= http://www.signstopusa.com/cm%20banking%20and%20tax.htm">Home with a twist</a>
    
    <a href="http://www.signstopusa.com/car%20magnets.htm?pageframe= http://www.signstopusa.com/cm%20banking%20and%20tax.htm">Home with a twist</a>
    Both of these didn't work. Any ideas?

  • #2
    Super Moderator sage45's Avatar
    Join Date
    May 2002
    Posts
    1,060
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Hey Tyson,

    Your attempts were close, however, you will need to use a little bit of javascript to solve your problem.

    Structure your links as such:

    Code:
    <a href="page2.htm?newLink=page3.htm&newAnchor=top">Showing Page 3 in Page 2 IFrame</a>
    <a href="page2.htm?newLink=page4.htm&newAnchor=top">Showing Page 4 in Page 2 IFrame</a>
    <a href="page2.htm?newLink=page5.htm&newAnchor=top">Showing Page 5 in Page 2 IFrame</a>
    and then inside of "page2.htm" use the following:

    Code:
    <html>
    	<head>
    		<script language="JavaScript">
    			function getParams() 
    			{
    				var idx = document.URL.indexOf('?');
    				var params = new Array();
    				if (idx != -1) 
    				{
    					var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
    					for (var i=0; i<pairs.length; i++) 
    					{
    						nameVal = pairs[i].split('=');
    						params[nameVal[0]] = nameVal[1];
       					}
    				}
    				return params;
    			}
    			params = getParams();
    		</script>
    	</head>
    	<body>
    		Some random text entered before the iframe...<br /><br />
    		<script language="JavaScript">
    			newLink = unescape(params["newLink"]);
    			newAnchor = unescape(params["newAnchor"]);
    
    			document.write("<iframe frameborder=0 scrolling=auto src="+ newLink + "#" + newAnchor + " name=pageFrame></iframe>");
    		</script>
    		<br /><br />Some random text entered after the iframe...
    	</body>
    </html>
    HTH,

    -saige-
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000

  • #3
    New Coder
    Join Date
    May 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sage45 View Post

    and then inside of "page2.htm" use the following:

    Code:
    <html>
    	<head>
    		<script language="JavaScript">
    			function getParams() 
    			{
    				var idx = document.URL.indexOf('?');
    				var params = new Array();
    				if (idx != -1) 
    				{
    					var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
    					for (var i=0; i<pairs.length; i++) 
    					{
    						nameVal = pairs[i].split('=');
    						params[nameVal[0]] = nameVal[1];
       					}
    				}
    				return params;
    			}
    			params = getParams();
    		</script>
    	</head>
    	<body>
    		Some random text entered before the iframe...<br /><br />
    		<script language="JavaScript">
    			newLink = unescape(params["newLink"]);
    			newAnchor = unescape(params["newAnchor"]);
    
    			document.write("<iframe frameborder=0 scrolling=auto src="+ newLink + "#" + newAnchor + " name=pageFrame></iframe>");
    		</script>
    		<br /><br />Some random text entered after the iframe...
    	</body>
    </html>
    HTH,

    -saige-
    I think this will work, but I still need it to default to the example page 3 (if it is opened by just the url or without a "newLink" specification) Can we have an "if" statement that says if there is a "newLink" specified it will proceed as you have written it, and if not it will load with default page 3 in the frame?

    I am no coder, but have learned a little as I have been forced to. Thank you

  • #4
    Super Moderator sage45's Avatar
    Join Date
    May 2002
    Posts
    1,060
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Not a problem Tyson,

    Just a simple matter of:

    Code:
    <html>
    	<head>
    		<script language="JavaScript">
    			function getParams() 
    			{
    				var idx = document.URL.indexOf('?');
    				var params = new Array();
    				if (idx != -1) 
    				{
    					var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
    					for (var i=0; i<pairs.length; i++) 
    					{
    						nameVal = pairs[i].split('=');
    						params[nameVal[0]] = nameVal[1];
       					}
    				}
    				return params;
    			}
    			params = getParams();
    		</script>
    	</head>
    	<body>
    		Some random text entered before the iframe...<br /><br />
    		<script language="JavaScript">
    			newLink = unescape(params["newLink"]);
    			newAnchor = unescape(params["newAnchor"]);
    
    			if (newLink == "")
    			{
    				document.write("<iframe frameborder=0 scrolling=auto src="page3.htm" name=pageFrame></iframe>");
    			} 
    			else
    			{
    				document.write("<iframe frameborder=0 scrolling=auto src="+ newLink + "#" + newAnchor + " name=pageFrame></iframe>");
    			}
    		</script>
    		<br /><br />Some random text entered after the iframe...
    	</body>
    </html>
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000

  • #5
    New Coder
    Join Date
    May 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I must have missed something. I placed your code in notepad and saved it as an html for testing and my test isn't working (the created Iframe is not loading with webpage I specified) in fact, I don't even see it (only the text "some random text..."

    I have the html files I created, but the server will not allow html files to transfer. I have saved them back to txt files for transfer.

    Can you look at them and see what I am missing. Do I have to link to and universal js code? Thank you for your help.
    Attached Files Attached Files

  • #6
    Super Moderator sage45's Avatar
    Join Date
    May 2002
    Posts
    1,060
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Figured out what the issue was... Since there are spaces in the link i.e. - 'http://www.signstopusa.com/cm banking and tax.htm'; we have to surround the link with quotes:

    Revised iframeloader.html:

    Code:
    <html>
    	<head>
    		<script type="text/javascript">
    		<!--
    			function getParams() 
    			{
    				var idx = document.URL.indexOf('?');
    				var params = new Array();
    				if (idx != -1) 
    				{
    					var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
    					for (var i=0; i<pairs.length; i++) 
    					{
    						nameVal = pairs[i].split('=');
    						params[nameVal[0]] = nameVal[1];
       					}
    				}
    				return params;
    			}
    			params = getParams();
    		// -->
    		</script>
    	</head>
    	<body>
    		Some random text entered before the iframe...<br /><br />
    		<script type="text/javascript">
    		<!--
    			newLink = unescape(params["newLink"]);
    			newAnchor = unescape(params["newAnchor"]);
    			document.write('New Link = ' + newLink + '<br />New Anchor = ' + newAnchor + '<br />');
    
    			if (newLink == "undefined")
    			{
    				document.write('<iframe frameborder=0 scrolling=auto src="http://www.signstopusa.com/quotes and phrases.htm" name=myframe></iframe>');
    			} 
    			else
    			{
    				document.write('<iframe frameborder=0 scrolling=auto src="' + newLink);
    				if (newAnchor != "undefined")
    				{
    					document.write('#' + newAnchor);
    				}
    				document.write('" name=pageFrame></iframe>');
    			}
    		// -->
    		</script>
    		<br /><br />Some random text entered after the iframe...
    	</body>
    </html>
    I also added some additional logic incase you wanted to leave the anchor out of the link. And I had to remove the deprecated Language= specification from the script tag.

    Tested in both IE and Firefox...

    HTH,

    -saige-
    Last edited by sage45; 06-13-2014 at 06:48 PM.
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000

  • Users who have thanked sage45 for this post:

    TysonHorlacher (06-13-2014)

  • #7
    New Coder
    Join Date
    May 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This is frustrating.

    I have now been able to get the default page to load, but I cannot get it to take the website (any website from Google to those I was trying earlier) and transpose that into the new link location of the page frame.

    I have tried using [all of these: "" '' {} [] ()] around the url I am trying to add onto the href after the "?" in my link. I must be doing something wrong but I have no idea what.

    Can I email you my test files (the html's)? I do not email unless given permission so that is why I am asking. Also, I can place them as text files as I have done earlier if you prefer.

    If you cannot help further, I understand. I just have no idea why it is now working (and probably neither do you). Also, can you upload the files you tested with in IE and Firefox and I'll adjust them to work for my purposes?

  • #8
    New Coder
    Join Date
    May 2013
    Posts
    19
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry,

    In my initial frustration, I didn't get the link files correct (forgot to add newLink=) I was just adding the link itself. sorry for the inconvenience.

  • #9
    Super Moderator sage45's Avatar
    Join Date
    May 2002
    Posts
    1,060
    Thanks
    0
    Thanked 13 Times in 13 Posts
    You can reupload your files... Here are the ones I used for testing:

    index.html.txt
    Iframeloader.html.txt

    However, I think you misunderstood what I mean when I stated:

    ...we have to surround the link with quotes...
    I surrounded the link in quotes after newLink is resolved hence:

    Code:
    				document.write('<iframe frameborder=0 scrolling=auto src="' + newLink); // src = <single quote><double quote>
    				if (newAnchor != "undefined")
    				{
    					document.write('#' + newAnchor);
    				}
    				document.write('" name=pageFrame></iframe>'); // .write(<single quote><double quote>
    Your links themselves do not need to change from what was specified before, i.e. -

    Code:
    <a href="./Iframeloader.html?newLink=http://www.signstopusa.com/quotes%20and%20phrases.htm&newAnchor=top">Showing Page 3 in Page 2 IFrame</a>
    HTH,

    -saige-
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000

  • #10
    Super Moderator sage45's Avatar
    Join Date
    May 2002
    Posts
    1,060
    Thanks
    0
    Thanked 13 Times in 13 Posts
    Not a problem.

    I am glad you were able to get it resolved.

    -saige-
    HTML & CSS Forum Moderator

    "If you don't know what you think you know, then what do you know."
    R.I.P. Derrick Thomas #58
    1/1/1967 - 2/8/2000


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •