iframe - getting something to reload outside the iframe

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • smartphreak
    New Member
    • Feb 2008
    • 9
    #1

    iframe - getting something to reload outside the iframe

    not sure if this is the right forum but i will try explain myself.

    lets start by giving the code
    Code:
    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<script type="text/javascript" src="loadiframes.js"></script>
<style type="text/css">
body	{
	margin:0 auto;
                width:900px;
	padding:0;
	background:#FFFFFF;
	}
</style>
</head>
<body>
<div align="center"><a href="mainlink.html"><img height="100" alt="" src="logo1.gif" width="400" border="0"></a></div>
<script type="text/javascript">
<!--
var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
    pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}
function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
    {
    rollOverArr[pageImageName].outImg = new Image;
    rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
    }
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}
function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</script>
<script type="text/javascript">
<!--
setrollover('link1_col2.gif',   'link1');
setrollover('link2_col2.gif', 'link2');
setrollover('link3_col2.gif',  'link3');
//-->
</script>

<div align="center"><a onmouseover="rollover('link1')" onmouseout="rollout('aboutme')" href="link1.html"><img height="20" alt="link1" src="link1_col1.gif" width="70" border="0" name=""></a> 
<a onmouseover="rollover('link2')" onmouseout="rollout('link2')" href="link2.php"><img height="20" alt="gallery" src="link2_col1.gif" width="70" border="0" name="link2"></a> 
<a onmouseover="rollover('contact')" onmouseout="rollout('link3')" href="link3.html"><img height="20" alt="contact" src="link3_col1.gif" width="70" border="0" name="contact"></a> </div>
<iframe src="frame1.php" width="700" height="700" name="content" id="content" align="right" frameborder="0">
	<p>Your browser does not support iframes</p>
</iframe>
<div align=center><a href="page1.php"></a></div>
<div align=center><a href="page2.php"></a></div>
<div align=center><a href="page3.php"></a></div>
<div align=center><a href="page4.php"></a></div>
<div align=center><a href="page5.php"></a></div>
</body>
</html>
    this is the page which has the iframe in it... the problems is that the rollover links also open in the iframe...

    How do i stop this? I am happy to play around and learn - just need a steer in the right direction. will you need to see the loadframes.js?

    Thanks!
    Tags: None
    • smartphreak
      New Member
      • Feb 2008
      • 9
      #2
      just thought i would load the javascript file as well...

      Code:
      var pageCount = new Array(0,0,0,0);
window.onload = initFrames;

function initFrames()	{
	for (var i=0; i<document.links.length; i++) {
		document.links[i].onclick = writeContent;
		document.links[i].thisPage = i+1;
	}
}

function writeContent()	{
	pageCount[this.thispage]++;
	
	var contentWin = document.getElementById("content").contentWindow.document;
	
	contentWin.body.innerHTML = newText;
	return false;
}

window.onload = initFrame;
function initFrame()	{
	for( var i=0; i<document.links.length; i++)	{
		document.links[i].target = "content";
		document.links[i].onclick = setiFrame;
	}
}

function setiFrame() {
	
	document.getElementById("content").contentWindow.document.location.href = this.href;
	return false;
}
      i think the problem lies in here, but i am not sure how to fix it.... any help would be great!

        Comment

        • hsriat
          Recognized Expert Top Contributor
          • Jan 2008
          • 1653
          #3
          So your rollovers are not working in iframe but with the rest of the page? Is it?

          iframe doesn't share JavaScript files with main document. So along with the main page, you need to call the same JavaScript function for the HTML page shown in the iframe.

          I hope I understood your problem, If not then tell me.

            Comment

            • smartphreak
              New Member
              • Feb 2008
              • 9
              #4
              Originally posted by hsriat
              So your rollovers are not working in iframe but with the rest of the page? Is it?

              iframe doesn't share JavaScript files with main document. So along with the main page, you need to call the same JavaScript function for the HTML page shown in the iframe.

              I hope I understood your problem, If not then tell me.
              all the links open in iframe i dont want the rollovers to. I wnat the rollover to open in their own browser window.

              target=_parent makes all link refresh the brower and opens the appropriate php/html file. target=_top makes everything open in iframe.

              does this explain it better.... would the link to the webpage help?

                Comment

                Previous template Next
                Working...