1

I am trying to add a form (just a text box) within a Sharepoint page that requires a user to enter the url of a PDF document that will then display in an iFrame on the same page.

I've found code to do this with an image, but I'm having a difficult time modifying it to display a PDF in an iFrame.

The code I'm trying to modify comes from a previous question. Here is the link:

Get img src from input box into a div

And here is the code without creating an iFrame. I'm not sure where that should be put into this code. Any assistance would be appreciated!

<html>
<head>
<script language="javascript">

function getImg(){
    var url=document.getElementById('txt').value;
    var div=document.createElement('div');
    var img=document.createElement('img');
    img.src=url;
    div.appendChild(img);
    document.getElementById('images').appendChild(div);
    return false;
}
</script>
</head>
<form>
  <input type="text" id="txt">
  <input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
Community
  • 1
  • 1
RaeJoKae
  • 11
  • 2

1 Answers1

0

Instead of creating an <img> tag, create an <object> tag:

<html>
<head>
    <script language="javascript">

        function getImg(){
            var url=document.getElementById('txt').value;
            var div=document.createElement('div');
            var obj = document.createElement('object');
            obj.data = url;
            obj.type = 'application/pdf';
            div.appendChild(obj);
            document.getElementById('images').appendChild(div);
            return false;
        }
    </script>
</head>
<form>
    <input type="text" id="txt">
    <input id="btn" type="button" value="Get Image" onclick="getImg();" />
</form>
<div id="images"></div>
JSchirrmacher
  • 3,243
  • 2
  • 19
  • 27
  • Thank you, Joachim! But this still doesn't display anything in my iFrame (or anywhere else). How does this get displayed? Thank you again! – RaeJoKae May 25 '16 at 15:28
  • It should work in modern browsers.Which one do you use? – JSchirrmacher May 25 '16 at 16:11
  • I replaced the code snippet by a complete code sample - successfully tested with Safari 9.1 and Firefox 46 on OSX. – JSchirrmacher May 25 '16 at 16:14
  • That might be the issue. I'm using IE 11. – RaeJoKae May 25 '16 at 18:26
  • Successfully tested in Chrome 50 on OSX; but sure, IE might not have an adequate PDF viewer embedded, and Chrome on Windows may differ as well. If you want to support clients w/o having an pdf viewer included or installed separately, you need to use a javascript based viewer like http://mozilla.github.com/pdf.js/ – JSchirrmacher May 26 '16 at 09:00