Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Dynamic IFrame Creation Caching Problem

polymorphic's Avatar
Newbie
  
Join Date: Oct 2006
Posts: 28
#1: Jul 20 '07
I have succeeded in embedding PDF files in a dynamic iframe. The problem is that I need the PDF to cache. If the PDF remains the same from page load to page load then the pdf is somehow cached with the html page. But if I try to navigate to another pdf in the IFRAME then no caching occurs. Is the problem in the IFRAME reloading instead of just refreshing the pdf?

Expand|Select|Wrap|Line Numbers
  1. <SCRIPT type="text/javascript">
  2.  
  3. var pageNo;
  4. var nav;
  5. var iframe;
  6. var embed;
  7. pageNo = 1;
  8.  
  9. var embed = "<EMBED src=/Catalog/Page" + pageNo + ".pdf scrollbar=1&amp;messages=0&amp;statusbar=0&amp;navpanes=0 width=600 height=650></EMBED>";
  10.  
  11. function makeIframe() {
  12. iframe = document.createElement("IFRAME");
  13. iframe.src = "javascript:'<HTML><HEAD>";
  14. iframe.src += "<TITLE>Dynamic IFrame</TITLE>";
  15. iframe.src += '</HEAD><BODY>';
  16. iframe.src += '<FORM method=get action=dummy.php>';
  17. iframe.src += "</FORM>" + embed + "</BODY></HTML>'";
  18. document.body.appendChild(iframe);
  19. f = document.getElementById('IFRAME');
  20. }
  21.  
  22. function navigate(nav){
  23.  
  24. if (nav == "f")
  25.  {
  26.     pageNo = pageNo + 1;
  27.     embed = "<EMBED src=/Catalog/Page" + pageNo + ".pdf scrollbar=1&amp;messages=0&amp;statusbar=0&amp;navpanes=0 width=600 height=650></EMBED>"
  28.  }
  29.  else if (nav == "b")
  30.  {
  31.     pageNo = pageNo - 1;
  32.     embed = "<EMBED src=/Catalog/Page" + pageNo + ".pdf scrollbar=1&amp;messages=0&amp;statusbar=0&amp;navpanes=0 width=600 height=650></EMBED>"
  33.  }
  34.  else if (nav == "i")
  35.  {
  36.      pageNo = 2;
  37.      embed = "<EMBED src=/Catalog/Page" + pageNo + ".pdf scrollbar=1&amp;messages=0&amp;statusbar=0&amp;navpanes=0 width=600 height=650></EMBED>"
  38.  }
  39.  
  40. this.document.frames['IFRAME'].location.reload(true);
  41.  
  42. }

polymorphic's Avatar
Newbie
  
Join Date: Oct 2006
Posts: 28
#2: Jul 30 '07

re: Dynamic IFrame Creation Caching Problem

I've been working on this problem on and off for a while now. I need to dynamically embed a pdf into an iframe. It works fine but the pdf is not caching. I assume that this is because the iframe is dynamic so that each time a new pdf is opened, a new iframe is created? Is there a way around this? I moved this from asp to html so that it supposedly WOULD cache the pdf. Could it be because I call the create iframe function from the onLoad event (onLoad="makeIframe()")? Here is the function I am using:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML><HEAD><TITLE>2007 Catalog</TITLE>
  3. <META http-equiv=Content-Type
  4. content="text/html; charset=windows-1252">
  5. <SCRIPT type="text/javascript">
  6.  
  7. var pageNo;
  8. var nav;
  9. pageNo = 1;
  10.  
  11. iframe = document.createElement("IFRAME");
  12.  
  13. function makeIframe(nav) {
  14.  
  15. if (nav == "f")
  16.  {
  17.     if (pageNo < 102)
  18.     {
  19.     pageNo = pageNo + 1;
  20.     }
  21.  }
  22.  else if (nav == "b")
  23.  {
  24.     if (pageNo != 1)
  25.     {
  26.     pageNo = pageNo - 1;
  27.     }
  28.  }
  29.  else if (nav == "i")
  30.  {
  31.      pageNo = 2;
  32.  }
  33.  
  34. iframe.src = "javascript:'<HTML><HEAD>";
  35. iframe.src += "<TITLE>Dynamic IFrame</TITLE>";
  36. iframe.src += '</HEAD><BODY>';
  37. iframe.src += '<FORM method=get action=dummy.php>';
  38. iframe.src += "</FORM><EMBED src=/Catalog/Page_" + pageNo + ".pdf toolbar=0;scrollbar=1&amp;pagemode=none&amp;zoom=50&amp;messages=0&amp;statusbar=0&amp;navpanes=0 width=600 height=650></EMBED></BODY></HTML>'";
  39. document.body.appendChild(iframe);
  40. }
  41. </SCRIPT>
  42. <link href="../css/style.css" rel="stylesheet" type="text/css">
  43. <link rel="stylesheet" href="stylesheets/main.css" type="text/css">
  44. </HEAD><BODY style="margin:0%" onLoad="makeIframe()">
  45. <table>
  46. <tr>
  47. <td width = "50%"><font color="#0000A0">
  48. <b>2007 Catalog</b></font>
  49. </td>
  50. <td width = "13%"></td>
  51. <td width = "50%" align = "right">
  52. <input type = "button" name = "bPrevious" value = "Previous" onClick="makeIframe('b')">
  53. <input type = "button" name = "bNext" value = "Next" onClick="makeIframe('f')">
  54. <input type = "button" name = "bIndex" value = "Index" onClick = "makeIframe('i')">
  55. <input type = "button" name = "bClose" value = "Close" onClick = "this.close">
  56. </td>
  57. </tr>
  58. </table>
  59. </BODY>
  60. </HTML>
pbmods's Avatar
Site Moderator
  
Join Date: Apr 2007
Location: Texas
Posts: 5,435
#3: Jul 31 '07

re: Dynamic IFrame Creation Caching Problem

Heya, polymorphic.

I can't be positive, but perhaps it has something to do with the fact that you are using embed tags.

What would happen if you just set the src of the iframe to the URI of the PDF?
polymorphic's Avatar
Newbie
  
Join Date: Oct 2006
Posts: 28
#4: Jul 31 '07

re: Dynamic IFrame Creation Caching Problem

Quote:

Originally Posted by pbmods

Heya, polymorphic.

I can't be positive, but perhaps it has something to do with the fact that you are using embed tags.

What would happen if you just set the src of the iframe to the URI of the PDF?

Um, you could be right. The pdfs cache when I open the html independently of the rest of the site. However, if I link to the html page then no caching. What is the difference?

Here is the changed script:
Expand|Select|Wrap|Line Numbers
  1. <SCRIPT type="text/javascript">
  2.  
  3. var pageNo;
  4. var nav;
  5. pageNo = 1;
  6.  
  7. function makeIframe(nav) {
  8.  
  9. if (nav == "f")
  10.  {
  11.     if (pageNo < 102)
  12.     {
  13.     pageNo = pageNo + 1;
  14.     }
  15.  }
  16.  else if (nav == "b")
  17.  {
  18.     if (pageNo != 1)
  19.     {
  20.     pageNo = pageNo - 1;
  21.     }
  22.  }
  23.  else if (nav == "i")
  24.  {
  25.      pageNo = 2;
  26.  }
  27. var iframe = document.createElement("IFRAME");
  28. iframe.setAttribute("src", "/Catalog/Page_" + pageNo + ".pdf");
  29. iframe.setAttribute("id", "contentFrom");
  30. document.body.appendChild(iframe);
  31. }
  32. </SCRIPT>
The href link is in an includes file (which is called from an asp file) as follows:

Expand|Select|Wrap|Line Numbers
  1. <!-- #include virtual="/includes/leftMenu.inc" -->
Expand|Select|Wrap|Line Numbers
  1. <tr>
  2.  <td><a href="catalog.html" target = "_blank" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('default_r3_c2','','images/default_r3_c2_f2.gif',1);"><img name="default_r3_c2" src="images/default_r3_c2.gif" width="160" height="40" border="0" alt=""></a></td>
  3. </tr>
I do not understand why it makes a difference.
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,439 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved