Jump to content
Sal's RuneScape Forum
Fatalysm

HTML linking from within then out of iframes

Recommended Posts

MASSIVE EDIT: THANKYOU BUT I DON'T NEED HELP ANYMORE, I DECIDED THAT CREATING AN IFRAME OF THE FORUM AND PLACING THAT INSIDE A CMS PAGE WAS ABOUT 1 MILLION TIMES EASIER, SOMETIMES PEOPLE CAN BE DUMB, BUT THEY JUST NEED TIME TO SEE THE LIGHT, THANK-YOU ALL.

 

 

 

So...I'm being lazy because I have no idea how to take my navigation from my magento store over to my phpbb forum. If you know of an easy way to do this, please do contribute :)!

 

HOWEVER

 

The problem

I'm loading an iframe into a webpage and of course it acts how it should, loading links within that iframe. What I want is to take all the links from inside that iframe, keep them where they are but ensure that they load outside of the iframe.

 

My code.

<div style="border: 0px; overflow: hidden; margin: 0px auto; height:694px;">
<iframe scrolling="no" src="http://naturalpetsupply.co.uk/forumpage" style="border: 0px none; margin-left: 0px; height: 100%; margin-top: -0px; width: 100%;"></iframe>
</div>

 

My solutions that didn't work.

I've tried using

<base target="_blank">

<base target="_parent">

target=“_parent”

target=“_top”

 

I have a feeling that the only real solution available is javascript or something a little more complex or perhaps even figuring out how to take my navigation from magento and add it straight to phpbb, but i'm just not getting it.

 

Help appreciated.

 

Edit: I've recreated the navigation in code form pretty roughly, but this wouldn't solve the problem of updated links from the main store. Everything would still have to be transferred manually unless i code get phpbb and magento to see the same thing.

 

 

<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css' />
<link href='https://fonts.googleapis.com/css?family=Rokkitt:400,700' rel='stylesheet' type='text/css' />
<style>
* {
margin:0;
padding:0;
}
body {
width:1012px;
margin:auto;
}

#nav {
width:100%;
margin-top:20px;
float: left;
padding: 0;
height:43px;
list-style: none;
border:8px solid #7db723;
background-color:#8ac42f;
}

#nav ul {
margin:0;
padding:0;}

#nav li {
float: left;
position:relative;
top:-71px;
left:-1px;
display:block;
padding-left:20px;
padding-right:20px;
padding-top:11px;
padding-bottom:11px;
background-color:#8ac42f;
margin-right:2px;
}

#nav li:hover {
background-color:#64a500;
}

#nav li a {
color: #eee;
text-decoration:none;
text-transform:uppercase;
font-family:rokkitt;
text-shadow: 1px 1px gray;
font-size:18px;
font-weight:bold;
}

li#active {
background-color:#64a500;
position: relative;
display: inline-block;
}


#navleft {
position:relative; TOP:-8px; LEFT:-38px;
}
#navright {
position:relative; TOP:-122px; LEFT:1012px;
}

.dropdown-content {
display: none;
position: absolute;
top:43px;
background-color: #64a500;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.dropdownmain:hover .dropdown-content {
display: block;
}

</style>

<div id="nav">
<img id="navleft" src="http://i.imgur.com/4tVk4zQ.png" />
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li id="active"><a href="#">Community</a></li>
<li class="dropdownmain"><a href="#">Dogs</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdownmain"><a href="#">Cats</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdownmain"><a href="#">Small Pets</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdownmain"><a href="#">Aviary</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li class="dropdownmain"><a href="#">Aquatic</a>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</li>
<li><a href="#">Contact Us</a></li>
</ul>
<img id="navright" src="http://i.imgur.com/KVyYfqe.png" />
</div>

 

 

Edited by Fatalysm

Share this post


Link to post
Share on other sites

Adding

 

<base target="_parent">

 

to the head of the page in the iframe should work in every browser. A javascript solution as you suggested would involve you editing all the links on the page in the iframe to be in format

 

window.parent.location.href=

 

which im assuming isn't ideal

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

By using this site, you agree to our Guidelines and Privacy Policy.