0

So I have an iFrame that displays a four page pdf on my SharePoint site. This iFrame is very handy for displaying the PDF, but I would like to make it so that clicking anywhere within the frame will open the PDF in browser. I have tried implementing some different strategies using and tags but have not found anything to accomplish this goal. The code I am using for the iFrame is below.

Any suggestions would be welcome.

<iframe width="500" height="550" src="URLtoPDF"></iframe>
lcarden
  • 1

1 Answers1

0

You can use below jQuery code on document ready if both domains are same (iframe and where it is located)

<script  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
      $('iframe').load(function () {
        $(this).contents().find("body").on('click', function (event) {            
           window.open($(this).attr("src"), "_blank");
        });
      });
    });
</script>

Use below code in case of simple javascript without any js file reference

<script type="text/javascript">
      window.onload = function () {
            var frame = document.getElementById('iframe');
            frame.onload = function () {
                var body = frame.contentWindow.document.body;
                body.onclick = function () {
                    var src = frame.getAttribute("src");
                    window.open(src, "_blank");
                };
            }
        }
 </script>

iframe is the id of the iframe element

Arun Kumar
  • 885
  • 5
  • 11
  • Forgive me, I am not well versed in jQuery... would I use this could in place of what I already have? If not then how would I implement it into my current code? – lcarden Sep 17 '18 at 17:18
  • place this code on the page where you have added iframe code, you need to reference jquery to make this work – Arun Kumar Sep 17 '18 at 17:41
  • updated my answer, just place this code on script editor or content editor web part on the same page – Arun Kumar Sep 17 '18 at 17:44
  • it seems like SharePoint is ignoring jQuery. Could you recommend a way to do this in JavaScript? – lcarden Sep 17 '18 at 18:10