Link to home
Create AccountLog in
Avatar of stoneycurtis
stoneycurtis

asked on

Hyperlink issue with Web Site iframes

Hello,
I have a web site that I developed from a template, it has a flash header and the other content is composed of iframes. It works well. In an email campaign I'm developing I'd like to hyperlink to a specific iframe on the site. The html code for the iframe and the email link are below:
Currently, when the email recipient clicks the link, he's taken to the index.html page, the flash header works, but he is not taken to the target.
What am I doing wrong?
Thanks in advance for any help you can offer
//iframe html//
<head>
<title>Appointments and Dispatching</title>
    <iframe name="iframe_8.html"></iframe>
</head>

//email link//
<a
  href="http://www.salesprotoolbox.com/" target="iframe_8.html">service scheduler</a>

Open in new window

Avatar of Gurvinder Pal Singh
Gurvinder Pal Singh
Flag of India image

you need to give an id to the iframe element you want to scroll to
http://radio.javaranch.com/pascarello/2005/01/09/1105293729000.html

also you can simply put an anchor tag on top of iframe so that you can go to the directly anchor on that page from the url click itself'
http://www.tizag.com/htmlT/links.php

for example if you want to goto a url, but automatically scroll to anchor name 'abc' you will do

http://www.urldomain.com/#abc



An iframe belongs in the body of the page, not the head.  http://www.w3schools.com/tags/tag_iframe.asp  If the iframe was in the body of the page, then the link would open in the already existing iframe.
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
@stoneycurtis: I am not sure I understand your design strategy.  Can you give us a link that will point us to a web site that works the way you have described?

This shows a little bit about how iFrames work. Install these two scripts and run the HTML to see the moving parts.
<?php // RAY_iframe.html
error_reporting(E_ALL);
session_start();
?>

<a target="frame_number_one" href="/RAY_iframe.php?n=1">SET FRAME ONE</a><br/>
<a target="frame_number_one" href="/RAY_iframe.php">CLEAR FRAME ONE</a><br/>
<br/>
<a target="frame_number_two" href="/RAY_iframe.php?n=2">SET FRAME TWO</a><br/>
<a target="frame_number_two" href="/RAY_iframe.php">CLEAR FRAME TWO</a><br/>


<!-- PUT UP SOME HTML TO DEFINE THE IFRAMES -->
<iframe name="frame_number_one" src="/RAY_iframe.php">one</iframe>
<br clear="all" />
<iframe name="frame_number_two" src="/RAY_iframe.php">two</iframe>
<br clear="all" />

<!-- SHOW THE PHP SCRIPT THAT RUNS THE IFRAMES -->
<a href="/RAY_iframe.php?n=3">CLICK HERE TO SEE THE IFRAME SOURCE CODE</a>

Open in new window

<?php // RAY_iframe.php
error_reporting(E_ALL);

// BUMP THE COUNTER UP BY ONE
session_start();
if (!isset($_SESSION["kounter"])) $_SESSION["kounter"] = 0;
$_SESSION["kounter"]++;

if (empty($_GET['n']))
{
    echo "NO IFRAME NUMBER SELECTED<br/>";
    echo "THE SESSION COUNTER IS {$_SESSION["kounter"]}<br/>";
    die();
}

// WRITE SOME HTML INTO THE FRAMES
if ($_GET['n'] == '1')
{
    echo "SELECTED IFRAME NUMBER ONE<br/>";
    echo "THE SESSION COUNTER IS {$_SESSION["kounter"]}<br/>";
    die();
}

if ($_GET['n'] == '2')
{
    echo "SELECTED IFRAME NUMBER TWO<br/>";
    echo "THE SESSION COUNTER IS {$_SESSION["kounter"]}<br/>";
    die();
}

// SHOW THE SOURCE CODE FOR THIS SCRIPT
if ($_GET['n'] == '3')
{
    highlight_file(__FILE__);
    die();
}

Open in new window


Sidebar note... Email campaigns are pretty well understood applications, and there are many companies that offer this service.  Instead of trying to outrun the horses, maybe you should consider riding one?  I like and use Constant Contact.  The choices to switch from my own code to a service came after years of running my own code.  I send thousands of emails a week, and many more at certain times of the financial and ecclesiastical calendar.  With my own code, it was a technology-laced labor.  With Constant Contact it is so simple that I can give the responsibility to interns and say, "just do it!"
Avatar of stoneycurtis
stoneycurtis

ASKER

@mplungjan:
Thanks for your input, you're right - I have misconceptions...
I placed your code:
<script>
var loc = location.search;
if (loc) loc = loc.split("&");
window.onload=function() {
  if (loc) {
    var iframeName=loc[0].split("=")[1];
    var page=loc[1].split("=")[1];
    window.frames[iframeName].location=page;
  }
}
</script>
In the <head> of my page www.salesprotoolbox.com/index.html
When I try to place the iframe name:
<iframe name="iframeName" src="about:blank"></iframe>
in the body of that page, the result is a blank box that appears on the web page when viewed in a browser, and the email link:
<a  href="http://www.salesprotoolbox.com/index.html?iframe=nameOfIframe&url=iframe_8.html">service scheduler</a>
Still sends the email recipient to the index.html page instead of iframe_8.html
I'm about to hit the sack. You can hide the iframe until filled or change about:blank to some default page. I'll take a look tomorrow
iframe=nameOfIframe should be the same as name="iframeName"

have a look here for a working example
http://plungjan.name/eetest/loadintoiframe.html
@mplungjan:
OK! Now I'm getting it, I'm using this link in my email:
http://www.salesprotoolbox.com/index.html?iframe=ApptDis&url=iframe_8.html
And I configured the index page script as such:
<iframe name="ApptDis" width="1px" height="1px" src="javascript:'loading...'" style="visibility:hidden"></iframe>
The index page opens, you can see the progress bar loading and then the Scheduler page appears but it takes 3 seconds (I have a 130mb connection), do you think there's a method to load the iframe_8 faster?
Those 3 seconds are your index.html loading first.

Ok do the following:

remove the other script

and change

<iframe name="ApptDis" width="1px" height="1px" src="javascript:'loading...'" style="visibility:hidden"></iframe>

to

<script>
var loc = location.search;
if (loc) {
  loc = loc.split("&");
  var iframeName=loc[0].split("=")[1];
  var page=loc[1].split("=")[1];
  document.write('<iframe name="'+iframeName+" width="1px" height="1px" src="'+page+'" style="visibility:hidden"></iframe>')
}
</script>

However I do not see the point in loading a hidden frame unless you are gaming google adwords or something
@mplungjan:
That method showed the 'Scheduler page' for an instant before the index page loaded over it.
Sorry I do not understand. Your iframe is 1PX big with visibility hidden so what do you want? I am not getting the full picture here