SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Aug 2004
    Location
    CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PHP to JavaScript

    Hello all,

    I have a page that has two links and they both go to the same page, a.php which has an iframe. depending on the link that gets clicked, the .html file displayed in the iframe is different. Sample of code below:

    (main.html)
    PHP Code:
    <html
    <
    body

    <
    a href="a.php?iframe=1">link to a.php with 1.html in iframe</a><br/> 
    <
    a href="a.php?iframe=2">link to a.php with 2.html in iframe</a><br/>
    <
    a href="a.php?iframe=3">link to a.php with 3.html in iframe</a
                
    </
    body
    </
    html
    (a.php)
    PHP Code:
    <html> 
    <body> 
    Whatever content is always in a.php<br /> 
    Then the dynamic content in the iframe below.<br /> 

    <?php 

    if ($iframe == 1

      
    printf("<iframe src=\"1.html\"></iframe>"); 

    elseif (
    $iframe == 2

      
    printf("<iframe src=\"2.html\"></iframe>"); 

    else (
    $iframe == 3

      
    printf("<iframe src=\"2.html\"></iframe>"); 

    ?> 

    </body> 
    </html>
    How would I do this in JavaScript? If you can help or direct me to somehwere I can find info, I would appreciate it!

    Thanks!
    Kei

  2. #2
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, you'll have an iframe on your page:
    HTML Code:
    <iframe src="page.php" name="mypage" width="500" height="200">No iframes!</iframe>
    Then you'll just do this:
    HTML Code:
    <a href="#" onclick="frames['mypage'].location.href = 'gohere.php?var=yes'; return false">Go!</a><br>
    <a href="#" onclick="frames['mypage'].location.href = 'another.php'; return false">Visit this place too!</a><br>

  3. #3
    SitePoint Member
    Join Date
    Aug 2004
    Location
    CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks but the code does not work.

    on my (a.html) page, i have entered:

    PHP Code:
    <a href="#" onclick="frames['int'].location.href = '1.html'; return false"><br>
    <
    a href="#" onclick="frames['int'].location.href = '2.html'; return false"><br
    on my page (main.html) there is an iframe named int. i thinkthe code you gave me above is if the link is in main.html not on a.html or maybe i am looking at it wrong? any help would be appreciated.

    thanks!
    kei

  4. #4
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, my answer is a bit late but yes, I meant the links to work on main.html, if the iframe is there.

    However,
    HTML Code:
    <a href="#" onclick="frames['int'].location.href = '1.html'; return false">link</a>
    will work on any page that has an iframe named 'int'. If the iframe is on an external page, you'll have to go to the that page first. But then again, why not to combine the pages? Atm main.html seems useless, but naturally I have no idea what you really have there. If you can't, but still want to replace the php code
    PHP Code:
    <?php

    if ($iframe == 1)
    {
      
    printf("<iframe src=\"1.html\"></iframe>");
    }
    elseif (
    $iframe == 2)
    {
      
    printf("<iframe src=\"2.html\"></iframe>");
    }
    else (
    $iframe == 3)
    {
      
    printf("<iframe src=\"2.html\"></iframe>");
    }
    ?>
    with javascript, then how about this:
    HTML Code:
    <html>
    <head>
    	<script language="JavaScript" type="text/javascript">
    	function get_vars() {
    		query = location.search;
    		if (query != "") {
    			get = {};
    			query = query.substring(1,query.length);
    			query = query.replace(/&{2,}/g,"&");
    			params = query.split("&");
    			for (i = 0; i < params.length; i++) {
    				par = params[i].split("=");
    				get[par[0]] = (par[1]) ? par[1] : "";
    			}
    			return get;
    		}
    		else return {};
    	}
    	</script>
    </head>
    <body>
    	Whatever content is always in a.php<br />
    	Then the dynamic content in the iframe below.<br />
    
    	<iframe name="theiframe" src="about:blank" width="500" height="100"></iframe>
    
    	<script language="JavaScript" type="text/javascript">
    		pages = {};
    		// pages[value of the get-variable named iframe] = url to go to
    		pages[1] = "1.html";
    		pages[2] = "2.html";
    		pages[3] = "3.html";
    		pages["something_else"] = "se.html";
    		not_found = "notfound.html";
    		get = get_vars();
    		frames["theiframe"].location.href = (get["iframe"] && pages[get["iframe"]]) ? pages[get["iframe"]] : not_found;
    	</script>
    
    </body>
    </html> 
    NOTE: the src of the iframe is meant to be about:blank WITHOUT the underscore, but sitepoint somehow changes it to about_:blank

  5. #5
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops. I forgot to tell you how to use it (in case you didn't figure it out yourself). If you use the code above (pure js), you can use links like <a href="a.php?iframe=whatever">link</a> on any page you want. Like main.html (which means you don't even have to edit main.html if you keep the links as they are).

  6. #6
    SitePoint Member
    Join Date
    Aug 2004
    Location
    CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Sorccu! it's pretty complictaed on why i have the links on main.html and the iframe is in a.html but like you noted, that's not the full content. I will try the JavaScript you gave below as soon as I get back home tonight! Thanks!

    Kei

  7. #7
    SitePoint Member
    Join Date
    Aug 2004
    Location
    CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It worked! Thanks Sorccu!

    I was just wondering, I wan't to try to prevent to have to add code into main.html. Would it work fine if I add the whole JavaScript into one .js file? Does both scripts have to placed where they are?

    I was thinking to put a link in the head:

    <SCRIPT language="JavaScript" src="/js/filename.js"></SCRIPT>

    or is it even possible to add one in the head and and another after the iframe tag so to say replace the actual code with the links?

    Thanks!

    Kei

  8. #8
    SitePoint Guru
    Join Date
    Jun 2004
    Location
    Finland
    Posts
    703
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can place the get_vars -script wherever you want (but not after the iframe-script). You can also place the links (pages[..] = ..) anywhere you want, but the remaining script,
    Code:
    frames["theiframe"].location.href = (get["iframe"] && pages[get["iframe"]]) ? pages[get["iframe"]] : not_found;
    must be placed after the iframe. Btw, there is no need to put this script into main.html. Also, I think this is a better version of the script:
    HTML Code:
    	<iframe name="theiframe" src="default.html" width="500" height="100"></iframe>
    
    	<script language="JavaScript" type="text/javascript">
    		pages = {};
    		// pages[value of the get-variable named iframe] = url to go to
    		pages[1] = "1.html";
    		pages[2] = "2.html";
    		pages[3] = "3.html";
    		pages["something_else"] = "se.html";
    		_GET = get_vars();
    		if (_GET["iframe"] && pages[_GET["iframe"]]) frames["theiframe"].location.href = pages[_GET["iframe"]];
    	</script>
    And when put together, the result would become something like this:
    get.js:
    Code:
    	function get_vars() {
    		query = location.search;
    		if (query != "") {
    			get = {};
    			query = query.substring(1,query.length);
    			query = query.replace(/&{2,}/g,"&");
    			params = query.split("&");
    			for (i = 0; i < params.length; i++) {
    				par = params[i].split("=");
    				get[par[0]] = (par[1]) ? par[1] : "";
    			}
    			return get;
    		}
    		else return {};
    	}
            var _GET = get_vars();
    a.html:
    HTML Code:
    <html>
    <head>
    	<script language="JavaScript" type="text/javascript" src="get.js"></script>
            <script language="JavaScript" type="text/javascript">
    	         pages = {};
    	         pages[1] = "1.html";
    	         pages[2] = "2.html";
    	         pages[3] = "3.html";
    	         pages["something_else"] = "se.html";
            </script>
    </head>
    <body>
    	Whatever content is always in a.php<br />
    	Then the dynamic content in the iframe below.<br />
    
    	<iframe name="theiframe" src="default.html" width="500" height="100"></iframe>
    
    	<script language="JavaScript" type="text/javascript">
    		if (_GET["iframe"] && pages[_GET["iframe"]]) frames["theiframe"].location.href = pages[_GET["iframe"]];
    	</script>
    
    </body>
    </html> 
    I didn't test this, but it should work

  9. #9
    SitePoint Member
    Join Date
    Aug 2004
    Location
    CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorccu, I will try this. I really appreciate the help you provided me! THANKS!

    Kei

  10. #10
    SitePoint Member
    Join Date
    Aug 2004
    Location
    CA
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorccu, just wanted to let you know that it worked. Thank you very much.

    I have a little over 50 links that I am going to add in this JavaScript (example = pages[60]). Will this slow down the load time of this page by alot?

    One last question. Is there a particular reason why you have:

    HTML Code:
            <script language="JavaScript" type="text/javascript">
    	         pages = {};
    	         pages[1] = "1.html";
    	         pages[2] = "2.html";
    	         pages[3] = "3.html";
    	         pages["something_else"] = "se.html";
            </script>
    on main.html? Can i just go:

    HTML Code:
    <script language="JavaScript" type="text/javascript" src="js/get.js"></script>
    <script language="JavaScript" type="text/javascript" src="js/link.js"></script>
    Thanks!
    Kei
    Last edited by kei; Aug 23, 2004 at 11:43.


Bookmarks

Posting Permissions

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