/    Sign up×
Community /Pin to ProfileBookmark

"Remove This Frame"

Copy linkTweet thisAlerts:
Aug 12.2009

I am trying to replicate the feature that Google Images uses. Typically, if you click on an image in Google images, it will open that image in a framed window. Part of that framed window will contain a Google Search box at the top and the page the image came from in the bottom half. On the side is a “Remove this Frame” option, and when clicked, the page is redirected to the “Src” part of the iframe.

First, I have to ask, is this a PHP issue or a Javascript issue? If it is JS please move it there. Thanks.

Anyway, I have a website where the “src” of the iframe is chosen randomly from an array of links. My question is, how do I get this src using PHP(or JS), make it in to a link, and when a “Remove this frame” link is clicked, it will simply link directly to the source that was determined earlier.

Sorry if this doesnt make sense, I can post my code so far if need be. Thanks everyone.

to post a comment
PHP

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@ryanlundAug 12.2009 — Definatly not a PHP issue, and can be done in javascript....however at the moment im too tired to tell you how to do this...however if you google something like 'closing frame using javascript' your bound to come up with something useful =)
Copy linkTweet thisAlerts:
@EasyTechAug 12.2009 — Right click and "view source code".

Better yet, Turn on Safari's developer tools, and then "Inspect Element". Firefox had a great set of tools, but they are incompatible with the latest version.

--Dave
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — Just so you are aware, Google doesn't just remove the frame with code, they completely reload the page with the url of the frame you wanted to view in your browsers main window.

Basically:

[code=html]<a href="{frames url}" target="_top">Remove this frame</a>[/code]

If you wanted to try and get the bottom frames location you can do something like this in Javascript:

[CODE]window.open(document.getElementById("{bottom frames id}").src, "_top");[/CODE]
Copy linkTweet thisAlerts:
@ChamzaauthorAug 12.2009 — Just so you are aware, Google doesn't just remove the frame with code, they completely reload the page with the url of the frame you wanted to view in your browsers main window.

Basically:

[code=html]<a href="{frames url}" target="_top">Remove this frame</a>[/code]
[/CODE][/QUOTE]

Reloading the page is exactly what I want to do, but the problem is that the "frames url" part is chosen randomly and is always changing. Here is a skeleton of the php code for my website to get a feel for what im saying:

[code=php]<?php
//Stumbleupon example

@$do = $_REQUEST['do'];
$urls = array(
'http://www.google.co.uk',
'http://www.hotmail.com',
); //Build a list of urls
if(isset($do) or !$do){ //Just so we can reload a site when the stumble button is pressed
$max = count($urls); //Count the number of url's we have in our list
$stumble = rand(0,$max); //Randomly select a url from the list
require("taskbar.php"); //Load the bar at the top of the page and keep it there
echo "I picked $urls[$stumble]"; //Just an example to show what was picked.
echo "<br /><br /><iframe frameborder='0' noresize='noresize' style='position: absolute; background: transparent; width: 100%; height:100%;' src='$urls[$stumble]' />This Site uses iFrames</iframe>"; //Loads the site contents
}
?>
?>

//FILE: taskbar.php
<div align="center"><a href="?do=stumble" />Stumble</a></div><br /><br />[/code]

So this is like the site "stumbleupon.com", and ideally, there will be many many links within the array. Because the "frame url" will always be randomly chosen from this array, how do i get the <a href=""> value to correspond to the website that was chosen?
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — Just a question, are you using a frameset here at all, because if not you could just do the random url choice earlier in the code (like before you even start writing out content), and include the $urls[$stumble] value in the <a> tag as well?
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — Or you could do this because you are using an <iframe>:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Iframe Test</title>
</head>
<body>

<a href="javascript: alert('Going to: ' + document.getElementById('the_content').src); window.open(document.getElementById('the_content').src, '_self');">Remove this Frame</a>
<iframe style="width: 100&#37;; height: 300px;" id="the_content" src="http://www.google.com/"></iframe>
<a href="javascript: alert('Going to: ' + document.getElementById('the_content').src); window.open(document.getElementById('the_content').src, '_self');">Remove this Frame</a>

</body>
</html>[/code]
Copy linkTweet thisAlerts:
@ChamzaauthorAug 13.2009 — thraddash, that second solution worked out perfectly! Thank you so much.
×

Success!

Help @Chamza spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...