CODEWITHSUNDEEP
javascripthtmlpdfiframeform-fields
RaeJoKae
RaeJoKae

Reputation: 11

Using a Text Box, HTML and Javascript to Display a PDF in an iFrame

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>

Upvotes: 1

Views: 2261

Answers (1)

JSchirrmacher
JSchirrmacher

Reputation: 3362

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>

Upvotes: 0

Related Questions