Main
Index 		Search
Posts 		Who's
Online 		Log
In

Home: Products: Off Topic / Other:
Iframe targeting

 
 


MickC
User

Oct 2, 2011, 9:31 PM

Post #1 of 3 (21226 views)
Shortcut
Iframe targeting Can't Post
Hi,
This is probably more of a HTML/Javascript question, but you guys all seem pretty switched on with all this, so here goes!

I have an iframe on our homepage, the source of which is a scrolling list of machinery, out of the CMSB
When a unit is clicked on, I want the details page to open in an Iframe on another page of our website.

I have read http://www.interactivetools.com/iforum/P59754#59754
the only issue is that our homepage and the other page containing the iframe are html, not php


tom
Staff


Oct 3, 2011, 10:18 AM

Post #2 of 3 (21170 views)
Shortcut
Re: [MickC] Iframe targeting [In reply to] Can't Post
Hello MickC,

We moved this to the off-topic section as it's not directly related to CMS Builder.

Generally we don't provide support for non-CMS Builder issues, but here's a start point for you :-)

As I understand it, you're not using php and you want to link from (a product) within an iframe to a new page which will, in another iframe, display the details (of the product).

For the first part, creating the links that will link to another page and pass the information about what product has been clicked:

Code
<a href='displayDetailsInIframe.html?pageLink=thePageYouWant.html' target="_blank">Here's a link</a>

The link just has a variable added (pageLink) with a value (the name of the page). I should also mention that target='_blank' will open a new window, not reload the current one (use target='_parent' to do that)

On the receiving page, add the following javascript to the top of the page (or, if you have a .js linked in your header, add it to that):
Code
function gup( name ) 
    { 
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
      var regexS = "[\\?&]"+name+"=([^&#]*)"; 
      var regex = new RegExp( regexS ); 
      var results = regex.exec( window.location.href ); 
      if( results == null ) 
        return ""; 
      else 
        return results[1]; 
    }

This function (found at netlobo http://www.netlobo.com/url_query_string_javascript.html) when called parses the url and finds the requested variable (in this case, pageLink) and returns its value.

Then, in the body of your page when loading the iframe, insert the following in place of the usual <iframe .. > opening tag:

Code
<script type="text/javascript"> 
var pageLink = gup("pageLink"); 
document.write( "<iframe src='"+pageLink+"'"+">"); 
</script>

This will create the tag with the page you have requested loaded within it.

Hope that makes sense,

Tom


(This post was edited by tom on Oct 3, 2011, 10:19 AM)


MickC
User

Oct 3, 2011, 2:14 PM

Post #3 of 3 (21144 views)
Shortcut
Re: [tom] Iframe targeting [In reply to] Can't Post
You are a godsend Tom!

everywhere else i looked, the mention of <iframes> sent people running.Unsure

Unfortunately, our existing site uses them, so i have to integrate with it.

I ended up getting it to work with a few mods,

with the link, i had to do a bit of directory navigating to get the results right, then add the listing link to it:

Code
 
<a href="../draft/usedeq.htm?pageLink=<?php echo $record['_link'] ?>" target="_parent"><img src="<?php echo $upload['thumbUrlPath'] ?></a>

Then I had to change a little bit of the body code on the receiving page to make the iframe the right size and blend in like the old one did:

Code
<script type="text/javascript">  
var pageLink = gup("pageLink");  
document.write( "<iframe src='"+pageLink+"'"+" width='100%' height='100%' scrolling='0' frameborder='0' allowtransparency='true'>");  
</script>

The only other thing I had to do was modify the header script of the receiving page to display the original content if no link is specified, (by adding to the " if( results == null ) " line, otherwise opening that page directly from the existing menu gave a blank iframe.

Code
<script type="text/javascript" > 
 function gup( name )  
    {  
      name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");  
      var regexS = "[\\?&]"+name+"=([^&#]*)";  
      var regex = new RegExp( regexS );  
      var results = regex.exec( window.location.href );  
      if( results == null )  
        return "our_default_UsedMachinerypage.php";  
      else   
        return results[1];  
    } 
    </script>

Works like a charm now!

Thanks again mate :)