Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 472
  • Last Modified:

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

0
stoneycurtis
Asked:
stoneycurtis
1 Solution
 
Gurvinder Pal SinghCommented:
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
 
Dave BaldwinFixer of ProblemsCommented:
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
 
Michel PlungjanIT ExpertCommented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Ray PaseurCommented:
@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
 
stoneycurtisAuthor Commented:
@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
 
Michel PlungjanIT ExpertCommented:
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
 
Michel PlungjanIT ExpertCommented:
iframe=nameOfIframe should be the same as name="iframeName"

have a look here for a working example
http://plungjan.name/eetest/loadintoiframe.html
0
 
stoneycurtisAuthor Commented:
@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
 
Michel PlungjanIT ExpertCommented:
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
 
stoneycurtisAuthor Commented:
@mplungjan:
That method showed the 'Scheduler page' for an instant before the index page loaded over it.
0
 
Michel PlungjanIT ExpertCommented:
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now