• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1072
  • Last Modified:

Problems changing the SRC parameter of an embedded PDF Object

I have the following code, that when you click on the first (or 3rd) link, the PDF object properly loads a PDF file.  But if you try to change the SRC parameter to load another PDF file, either with or without clearing the SRC parameter first, then the page hangs and won't load the second file.  I just need this to be able to change the src of the pdf object programatically.  Also, please don't suggest the use of Frames or IFrames - I can't use them in my requirements.

Here's the problematic source code:
------------------------------------------------------------------------
1. <span style="text-decoration:underline; cursor:hand;" onClick="pdfObject.src='http://www.adobe.com/products/acrobat/pdfs/acrobat6matrix.pdf';">Load PDF File A</span><br>
2. <span style="text-decoration:underline; cursor:hand;" onClick="pdfObject.src='';">Clear PDF Src Param</span><br>
3. <span style="text-decoration:underline; cursor:hand;" onClick="pdfObject.src='http://www.adobe.com/products/creativesuite/pdfs/creativesuite_faq.pdf';">Load PDF File B</span><br>
<object id="pdfObject" height="500" width="400" align="top" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000">
<param name="setShowToolBar" value="false">
<param name="SRC" value="">
</object>
0
bmccleary
Asked:
bmccleary
  • 4
  • 3
1 Solution
 
Daedalus05Commented:
Using Javascript and GET requests, you can handle this as follows:
To load no PDF, use the URL http://yourdomain.com/pdfpage.html
To load PDF A, use the URL http://yourdomain.com/pdfpage.html?pdf=A
To load PDF B, use the URL http://yourdomain.com/pdfpage.html?pdf=B
etc.

Then you would write a JavaScript such that when the page loads, it checks for the GET string, validates the value of pdf as either A or B (or any other valid value), and fills the pdfObject.src parameter as necessary.

An example might be as follows:

<script type="text/javascript">
<!-- (hide from incompatible browsers)
 // These are strings for dynamically writing all but the source URL for the PDF Object
 var objString1 = "<object id=\"pdfObject\" height=500 width=400 align=\"top\" "+
  "classid=\"clsid:CA8A9780-280D-11CF-A24D-444553540000\">\n"+
  "<param name=\"setShowToolBar\" value=\"false\">"+
  "<param name=\"SRC\" value=\"";
 var objString2 = "\">\n</object>";

 // Find the start of the get request
 var startOfGet = document.location.toString().indexOf("?");

 // The GET string is everything AFTER the ?, with multiple vars separated by ampersands
 // we store this as an array using split()
 var getRequest = document.location.toString().substring(startOfGet + 1).split("&");

 // For each GET var, we only check here for one that contains "pdf="
 for(var i = 0; i < getRequest.length; i++)
  if(getRequest[i].indexOf("pdf=")) {
   /* Assuming the length of the value for the pdf variable is only going to be one letter (A or B)
    * we here take the single letter value for pdf as the character following "pdf=";
   var pdfVal = getRequest[i].substring(getRequest[i].indexOf("pdf=") + 4, 1);
   if(pdfVal == "A" || pdfVal == "a")
    document.write(objString1+"http://www.adobe.com/products/acrobat/pdfs/acrobat6matrix.pdf"+objString2);
   else if(pdfVal == "B" || pdfVal == "b")
    document.write(objString1+"http://www.adobe.com/products/creativesuite/pdfs/creativesuite_faq.pdf"+objString2);
  }
//-->
</script>

Place this script where the <object> is currently located, instead of the entire <object> section.
0
 
Daedalus05Commented:
Also, if you have server-side scripting that might work better than client-side. If so, what flavor?
0
 
bmcclearyAuthor Commented:
Daedalus05,
Thanks for the great response, and that makes a lot of sense, but I have one problem.  Imagine that my page has a bunch of content "around" the pdf file that I don't want to have reloaded everytime the user switches pdf files.  I want the content around the page to stay loaded without a page refresh, but still be able to change the source of the acrobat object in the page to load a new pdf file.  This would be easy with frames, but I can't use frames in my application.  Any thoughts?
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
bmcclearyAuthor Commented:
By the way, we are doing this in .NET, but the problem is not with the server side code, it's again that I want the PDF source to change without a post-back (which takes considerable time due to the other information on the page).
0
 
Daedalus05Commented:
I have tested the following and it works perfectly. You'll have to move things around to fit with your website, but it should work for you. Notice the encapsulating <div> tag contains the PDF object. Using its innerHTML property I clear the div completely and write a completely new object tag. Also, I have created a CSS class for the display of the links.

<html>
<head>
<style type="text/css">
 /* This is to replace the identical styles for the three span pseudo-links */
 .pdflink { text-decoration: underline; cursor:hand }
</style>

<script type="text/javascript">
<!-- (hide from incompatible browsers)
 // These are strings for dynamically writing all but the source URL for the PDF Object
 var objString1 = "<object id=\"pdfObject\" height=500 width=400 align=\"top\" "+
  "classid=\"clsid:CA8A9780-280D-11CF-A24D-444553540000\">\n"+
  "<param name=\"setShowToolBar\" value=\"false\">"+
  "<param name=\"SRC\" value=\"";
 var objString2 = "\">\n</object>";

 function changePDF(pdfID) {
  document.getElementById("pdfSection").innerHTML = "";
  switch(pdfID) {
   case 0: break; /* To simply clear the PDF object */
   case 1: document.getElementById('pdfSection').innerHTML = objString1+"http://www.adobe.com/products/acrobat/pdfs/acrobat6matrix.pdf"+objString2; alert(pdfObject.src); break;
   case 2: document.getElementById('pdfSection').innerHTML = objString1+"http://www.adobe.com/products/creativesuite/pdfs/creativesuite_faq.pdf"+objString2; alert(pdfObject.src); break;
   /* Additional PDF Files can be specified here, with other unique pdfIDs */
   default: alert("Invalid PDF Specified"); break;
  }
 }
//-->
</script>
</head>
<body>
Content Preceding PDF and Links
1. <span class="pdflink" onClick="changePDF(1);">Load PDF File A</span><br>
2. <span class="pdflink" onClick="changePDF(0);">Clear PDF Src Param</span><br>
3. <span class="pdflink" onClick="changePDF(2);">Load PDF File B</span><br>
<div id="pdfSection" style="height: 500; width: 400;">
<object id="pdfObject" height="500" width="400" align="top" classid="clsid:CA8A9780-280D-11CF-A24D-444553540000">
<param name="setShowToolBar" value="false">
<param name="SRC" value="">
</object>
</div>
Content Following PDF and Links
</body>
</html>
0
 
Daedalus05Commented:
You could also modify the function call as follows:

onClick="changePDF('http://www.adobe.com/products/acrobat/pdfs/acrobat6matrix.pdf');"

and the function would then be:

function changePDF(pdfURL) {
 document.getElementById("pdfSection").innerHTML = "";
 document.getElementByID("pdfSection").innerHTML = objString1 + pdfURL + objString2;
}
0
 
bmcclearyAuthor Commented:
Fantastic!  Thanks Daedalus05, that worked perfectly.  I really appreciate your help.  It's such a simple solution, but I was tearing out my hair trying to figure it out.  On a side note, do you know any of the other parameters, like setShowToolbar, that I can use to customize the look of the PDF object, or where I can look to find them?  Please let me know!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now