Geek Answers Handbook

Detecting iframe scroll event triggered by AJAX reqest

I have a link on my main page that uses ajax to retrieve a PDF file that is displayed in an iframe, I am trying to detect a scroll event of a PDF document and display a message or something to do. I tried different solutions from other solutions in stackoverflow and google search in general and did not find a good solution.

main.php

<html> <!--ajax request--> <script type="text/javascript"> $(document).on('click','#nextpdf',function(event) { event.preventDefault(); var reg = $(this).attr("href"); var str = reg.split('?')[1]; $.ajax({ type: "GET", url: '../functions/pdfreader.php', data: 'pdfxs='+str+'', cache:false, async: false, success: function(data) { // data is ur summary $('.refresh').html(data); return false; } });//end of ajax }); </script> <?php while($obj = $c_content->fetch()) { $title = $obj['lecture_title']; echo '<article class="comment2"> //pdf link <div class="comment2-body"> <div class="text" style="color:#999;padding-right:130px;"> <p><a href="../functions/pdfreader.php?'.$title.'"" style="color:#999" id="nextpdf">'.$title.'</a></p> </div> </div> </article> '; } ?> </html>

pdfreader.php

 //detect iframe pdf scroll <script type="text/javascript"> $("myiframe").load(function () { var iframe = $("myiframe").contents(); $(iframe).scroll(function () { alert('scrolling...'); }); }); </script> <?php ........ while($obj = $gettrend->fetch()) { $coursefile = $obj['lecture_content']; //this is my iframe echo '<div class="mov_pdf_frame"><iframe id="myiframe" src="https://localhost/einstower/e-learn/courses/pdf/'.$coursefile.'" id="pdf_content" width="700px" height="800px" type="application/pdf"> </iframe></div>'; } ?>

The main problem here is that nothing happens when I view a PDF document, how can I detect scrolling?

I found this script that works, but I cannot consider the javascript solution. http://fiddle.jshell.net/czw8pbvj/1/

+7
javascript jquery html php iframe
source share
5 answers

Since this question has been asked a long time ago, I think I need to help with my experience before.

Answer: you cannot

Why? because PDF is issued by external applications such as Adobe PDF Reader, foxit or more. And you cannot attach an event to them.

if you are using adobe reader. The only thing you can do is go to the page, zoom, etc. The full example can be read here: https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=8 (see I will bring you directly to page 8 on the first page )

But, hei .. how if our client uses other applications? we will be more embarrassed

The way to do this is to create your own PDF viewer.

we can use the js library, for example: http://www.bestjquery.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

but here I will show you to use pdf.js , which was created by mozilla.

main.php

 <style> .preview{ display:none; width: 400px; height: 400px; border: 1px solid black; } </style> <a href="pdfreader.php?pdfxs=test.pdf" style="color:#999;" id="nextpdf">file/test.pdf</a><br> <a href="pdfreader.php?pdfxs=test1.pdf" style="color:#999;" id="nextpdf">file/test1.pdf</a><br> <div class="preview"> <iframe id="myiframe" frameborder="0" width="400px" height="400px" >not support iframe</iframe> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $(document).on('click', '#nextpdf', function(e){ e.preventDefault(); $('#myiframe').attr('src', $(this).attr('href')); $('.preview').show(); }); //handle iframe on scroll $('#myiframe').on('load', function () { $(this).contents().scroll(function () { console.log('scrolled'); }).click(function(){ console.log('clicked'); }); }); }); </script>

pdfreader.php

 <?php $path = 'file/'; $pdf = isset($_GET['pdfxs']) ? $path . $_GET['pdfxs'] : ''; if(!file_exists($pdf) || !mime_content_type($pdf) =='application/pdf') die('file not found'); ?> <div id="pdf-container"> <div id="pdf-box"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//mozilla.imtqy.com/pdf.js/build/pdf.js"></script> <script> $(function(){ //original script : https://gist.github.com/fcingolani/3300351 function renderPDF(url, canvasContainer, options) { var options = options || { scale: 1 }; function renderPage(page) { var viewport = page.getViewport(options.scale); var canvas = $(document.createElement('canvas')); var renderContext = { canvasContext: canvas[0].getContext('2d'), viewport: viewport }; canvas.attr('width', viewport.width).attr('height', viewport.height); canvasContainer.append(canvas); page.render(renderContext); } function renderPages(pdfDoc) { for(var num = 1; num <= pdfDoc.numPages; num++) pdfDoc.getPage(num).then(renderPage); } PDFJS.disableWorker = true; PDFJS.getDocument(url).then(renderPages); } renderPDF('<?=$pdf;?>', $('#pdf-box')); }); </script>

Note: I put pdf in the file/ folder

in main.php you will notice that you can attach the event scroll (and click too) in pdf. because our PDF is no longer displayed by external applications.

and the last part - if you carefully read pdfreader.php , you will notice that you no longer need an iframe . You just need a div, and then you can fully handle all the events that you want to use in your pdf format: for example, scrolling, clicking, changing a page, scaling, etc. Why? because now your pdf file is now replaced with a canvas (pdf.js makes your pdf document as an HTML5 canvas). see full example pdf.js

+1
source share

First, $("myiframe") does not find anything, so it binds the load event to zero. 1) change it to $("#myiframe") or $("iframe") .

The fiddle works here (to detect iframe scrolling)

UPDATE: to detect scrolling in a PDF, you cannot use an iframe. To do this, you need embed or object tags and a JS-enabled PDF document (hopefully your PDFs) that can send messages to your JS page (see this answer ).

Unfortunately, I could not find the scroll event in the Adobe Acrobat API Reference . It lists only these events:

Event Type : Event Names

Application : Init

Package : Exec

Bookmark : mouse up

Console : Exec

Doc : DidPrint, DidSave, Open, WillClose, WillPrint, WillSave

External : Exec

Field : blur, calculation, focus, formatting, mouse click, mouse input, mouse exit, mouse, check

Link : mouse up

Menu : Exec

Page : Open, Close

Screen : InView, OutView, Open, Close, Focus, Blur, Mouse Up, Mouse Down, Mouse Enter, Mouse Exit

So basically, I think that what you want is not yet possible, at least with the default rendering. With custom rendering ( https://github.com/mozilla/pdf.js ) this may be possible, although I'm not sure.

Apparently this can be done by scrolling the page (see this question ). Back to the iframes solution. :^D

+2
source share

Please, try

 iframe.on( "scroll", handler )
0
source share
 $("#frame").scroll(function () { if ($(window).scrollTop() == $(document).height() - $(window).height()) alert('Bottom reached'); });

I found this in the JSFiddle referenced in the Fiddle you linked . HTML field is empty. This CSS was there too.

 body { height: 1500px; }

In the script you are associated with, the <iframe> has the identifier frame . I decided that you could use a jQuery selector like $("#frame") .

0
source share

I think this will help you.

 $("#myiframe").load(function () { $(this).contents().scroll(function () { //your code here }); });
0
source share

More articles:


All Articles