Solved

Problems changing the SRC parameter of an embedded PDF Object

Posted on 2004-10-28
1,037 Views
Last Modified: 2012-08-14
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
Question by:bmccleary
    7 Comments
     
    LVL 3

    Expert Comment

    by:Daedalus05
    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
     
    LVL 3

    Expert Comment

    by:Daedalus05
    Also, if you have server-side scripting that might work better than client-side. If so, what flavor?
    0
     

    Author Comment

    by:bmccleary
    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
     

    Author Comment

    by:bmccleary
    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
     
    LVL 3

    Accepted Solution

    by:
    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
     
    LVL 3

    Expert Comment

    by:Daedalus05
    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
     

    Author Comment

    by:bmccleary
    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

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Foreword (July, 2015) Since I first wrote this article, years ago, a great many more people have begun using the internet.  They are coming online from every part of the globe, learning, reading, shopping and spending money at an ever-increasing ra…
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    933 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now