Solved

Hyperlink issue with Web Site iframes

Posted on 2011-02-11
11
453 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:stoneycurtis
11 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 34877006
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



0
 
LVL 82

Expert Comment

by:Dave Baldwin
ID: 34877019
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.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 34877217
Seems you have a few misconceptions about html and web

An iframe would be

<iframe name="nameOfIframe" src="filenameOfHtmlPage.html"></iframe>

and as already mentioned not in the head of an html page.

A link on the same page as the iframe could target it but you cannot target a hyperlink in an email to a frame on the page you send them to.

You can pass a parameter like this:
Email: <a  href="http://www.salesprotoolbox.com/index.html?iframe=nameOfIframe&url=iframe_8.html">service scheduler</a>

webpage (i.e. http://www.salesprotoolbox.com/index.html)

<html>
<head>
<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>
</head>
<body>
.
.
.
<iframe name="iframeName" src="about:blank"></iframe>
</body>
</html>


This will load the page iframe_8.html into the iframe called iframeName when the page is loaded from the link in the email
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 34878229
@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!"
0
 

Author Comment

by:stoneycurtis
ID: 34891198
@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
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34891259
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34895206
iframe=nameOfIframe should be the same as name="iframeName"

have a look here for a working example
http://plungjan.name/eetest/loadintoiframe.html
0
 

Author Comment

by:stoneycurtis
ID: 34897535
@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?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34897742
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
0
 

Author Comment

by:stoneycurtis
ID: 34898415
@mplungjan:
That method showed the 'Scheduler page' for an instant before the index page loaded over it.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 34898845
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
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now