Question

我的主页中有一个链接，它使用ajax来检索在iframe中显示的PDF，我正在尝试检测PDF文档的滚动事件并显示消息或执行某些操作。我已经在stackoverflow和谷歌搜索上尝试了其他解决方案的不同解决方案，并且无法找到一个好的解决方案。

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>';
             }
                 ?>

这里的主要问题是当我滚动pdf文档时没有任何反应，我如何检测滚动？

我发现这个小提琴有效，但我无法查看javascript解决方案。 http://fiddle.jshell.net/czw8pbvj/1/

Answer 1

首先，$("myiframe")找不到任何内容，因此它会将加载事件附加到任何内容。 1）将其更改为$("#myiframe")或$("iframe")。

Here's a working fiddle (for iframe scroll detection)

更新：要检测PDF文档中的滚动，您无法使用iframe。为此，您需要embed或object标签以及支持JS的PDF文档（希望是您的PDF文件......），他们可以向您的页面JS发送消息（参见{{3 }}）。

不幸的是，我无法在this answer中找到滚动事件。它仅列出了这些事件：

事件类型：事件名称

应用：初始

批次：执行

书签：鼠标悬停

控制台：执行

Doc ：DidPrint，DidSave，Open，WillClose，WillPrint，WillSave

外部：执行

字段：模糊，计算，对焦，格式化，按键，鼠标按下，鼠标输入，鼠标退出，鼠标向上，验证

链接：鼠标悬停

菜单：执行

页面：打开，关闭

屏幕：InView，OutView，打开，关闭，对焦，模糊，鼠标向上，鼠标向下，鼠标输入，鼠标退出

所以，基本上，我认为你想要的东西现在是不可能的，至少在默认渲染方面是这样。使用自定义渲染（Adobe's Acrobat API Reference）它是可能的，虽然我不确定。

显然，可以通过页面滚动来完成（请参阅https://github.com/mozilla/pdf.js问题）。所以回到iframes解决方案。 :^D

Answer 2

请试试这个

iframe.on( "scroll", handler )

Answer 3

因为很久以前就问过这个问题，我想我需要先帮助我的经验。

答案是：你不能

为什么呢？因为PDF是由外部应用程序呈现的，例如adobe pdf reader，foxit等。你不能在他们身上附上活动。

如果您使用的是adobe reader，您唯一能做的就是转到页面，更改缩放等。您可以在此处阅读完整示例：https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=8（请参阅。我将您带到第8页而不是第一页）

但是，嘿..如果我们的客户使用其他应用程序怎么办？我们会更加困惑

这样做的方法只是构建自己的pdf查看器。

我们可以使用js库，例如：http://www.bestjquery.com/2012/09/best-jquery-pdf-viewer-plugin-examples/

但是在这里我只会告诉你使用由mozilla创建的pdf.js。

<强> 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.github.io/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>

注意：我把pdf放在文件夹file/

上

在main.php中，您会注意到您可以将事件滚动（并点击）附加到pdf。因为我们的pdf现在不是由外部应用程序呈现的。

最后一部分是，如果您仔细阅读pdfreader.php，您会发现不再需要iframe 。你只需要div，然后你可以完全处理你想要的pdf所有事件：如滚动，点击，更改页面，缩放等等为什么？因为你的pdf现在被渲染为画布（pdf.js将你的pdf渲染为HTML5画布）。见full example of pdf.js

Answer 4

$("#frame").scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height())
        alert('Bottom reached');
});

我在JSFiddle that was referenced in the Fiddle you linked找到了这个。 HTML字段为空。这个CSS也在那里。

body {
    height: 1500px;
}

在您关联的小提琴中，<iframe>的ID为frame。我想你可以像$("#frame")一样使用jQuery选择器。

Answer 5

我认为这会对你有帮助。

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

检测由AJAX reqest调用的Iframe的滚动事件

5 个答案: