By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,447 Members | 1,172 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,447 IT Pros & Developers. It's quick & easy.

iframe - getting something to reload outside the iframe

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

lets start by giving the code
Expand|Select|Wrap|Line Numbers
  1. <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3. <title>TITLE</title>
  4. <script type="text/javascript" src="loadiframes.js"></script>
  5. <style type="text/css">
  6. body    {
  7.     margin:0 auto;
  8.                 width:900px;
  9.     padding:0;
  10.     background:#FFFFFF;
  11.     }
  12. </style>
  13. </head>
  14. <body>
  15. <div align="center"><a href="mainlink.html"><img height="100" alt="" src="logo1.gif" width="400" border="0"></a></div>
  16. <script type="text/javascript">
  17. <!--
  18. var rollOverArr=new Array();
  19. function setrollover(OverImgSrc,pageImageName)
  20. {
  21. if (! document.images)return;
  22. if (pageImageName == null)
  23.     pageImageName = document.images[document.images.length-1].name;
  24. rollOverArr[pageImageName]=new Object;
  25. rollOverArr[pageImageName].overImg = new Image;
  26. rollOverArr[pageImageName].overImg.src=OverImgSrc;
  27. }
  28. function rollover(pageImageName)
  29. {
  30. if (! document.images)return;
  31. if (! rollOverArr[pageImageName])return;
  32. if (! rollOverArr[pageImageName].outImg)
  33.     {
  34.     rollOverArr[pageImageName].outImg = new Image;
  35.     rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
  36.     }
  37. document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
  38. }
  39. function rollout(pageImageName)
  40. {
  41. if (! document.images)return;
  42. if (! rollOverArr[pageImageName])return;
  43. document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
  44. }
  45. //-->
  46. </script>
  47. <script type="text/javascript">
  48. <!--
  49. setrollover('link1_col2.gif',   'link1');
  50. setrollover('link2_col2.gif', 'link2');
  51. setrollover('link3_col2.gif',  'link3');
  52. //-->
  53. </script>
  54.  
  55. <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> 
  56. <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> 
  57. <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>
  58. <iframe src="frame1.php" width="700" height="700" name="content" id="content" align="right" frameborder="0">
  59.     <p>Your browser does not support iframes</p>
  60. </iframe>
  61. <div align=center><a href="page1.php"></a></div>
  62. <div align=center><a href="page2.php"></a></div>
  63. <div align=center><a href="page3.php"></a></div>
  64. <div align=center><a href="page4.php"></a></div>
  65. <div align=center><a href="page5.php"></a></div>
  66. </body>
  67. </html>
  68.  
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!
Feb 27 '08 #1
Share this Question
Share on Google+
3 Replies


P: 9
just thought i would load the javascript file as well...

Expand|Select|Wrap|Line Numbers
  1. var pageCount = new Array(0,0,0,0);
  2. window.onload = initFrames;
  3.  
  4. function initFrames()    {
  5.     for (var i=0; i<document.links.length; i++) {
  6.         document.links[i].onclick = writeContent;
  7.         document.links[i].thisPage = i+1;
  8.     }
  9. }
  10.  
  11. function writeContent()    {
  12.     pageCount[this.thispage]++;
  13.  
  14.     var contentWin = document.getElementById("content").contentWindow.document;
  15.  
  16.     contentWin.body.innerHTML = newText;
  17.     return false;
  18. }
  19.  
  20. window.onload = initFrame;
  21. function initFrame()    {
  22.     for( var i=0; i<document.links.length; i++)    {
  23.         document.links[i].target = "content";
  24.         document.links[i].onclick = setiFrame;
  25.     }
  26. }
  27.  
  28. function setiFrame() {
  29.  
  30.     document.getElementById("content").contentWindow.document.location.href = this.href;
  31.     return false;
  32. }
  33.  
i think the problem lies in here, but i am not sure how to fix it.... any help would be great!
Feb 27 '08 #2

hsriat
Expert 100+
P: 1,654
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.
Feb 27 '08 #3

P: 9
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?
Feb 27 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.