javascript - 检测 AJAX 请求调用的 Iframe 滚动事件

标签 javascript php jquery html iframe

我的主页上有一个链接,该链接使用 ajax 检索在 Iframe 中显示的 PDF,我正在尝试检测 PDF 文档的滚动事件并显示消息或执行某些操作。一般来说,我在 stackoverflow 和谷歌搜索上尝试了与其他解决方案不同的解决方案,但找不到好的解决方案。

主.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 文档时没有任何反应,我如何检测滚动?

我发现这个 fiddle 可以工作,但我无法查看 javascript 解决方案。 http://fiddle.jshell.net/czw8pbvj/1/

最佳答案

首先,$("myiframe") 没有找到任何东西,所以它没有附加一个加载事件。 1) 将其更改为 $("#myiframe")$("iframe")

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


更新:要检测 PDF 文档中的滚动,您不能使用 iframe。为此,您需要 embedobject 标签和支持 JS 的 PDF 文档(希望它是您的 PDF..),它们可以向您页面的 JS 发送消息(参见 this answer ).

不幸的是,我在 Adobe's Acrobat API Reference 中找不到滚动事件。它仅列出这些事件:

Event type: Event names

应用:初始化

批处理:执行

书签:鼠标向上

控制台:执行

文档:DidPrint、DidSave、打开、WillClose、WillPrint、WillSave

外部:执行

字段:模糊、计算、焦点、格式、击键、鼠标按下、鼠标进入、鼠标退出、鼠标松开、验证

链接:鼠标向上

菜单:执行

页面:打开、关闭

屏幕:InView、OutView、打开、关闭、聚焦、模糊、鼠标向上、鼠标向下、鼠标进入、鼠标退出


所以,基本上,我认为目前您想要的是不可能的,至少在默认渲染下是不可能的。使用自定义渲染( https://github.com/mozilla/pdf.js )它是可能的,但我不确定。

显然,它可以通过页面滚动来完成(参见 this 问题)。所以回到 iframe 解决方案。 :^D

关于javascript - 检测 AJAX 请求调用的 Iframe 滚动事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48888258/

相关文章:

jquery - 如何在 jQuery 中聚焦滚动条时禁用可拖动的 div

javascript - 多形式ajax php社交评论系统

javascript - 将字符串转换为 Angular 8 中的枚举值

php - 在 wordpress 中更改 CSS

php - 本地 WordPress 开发问题 index.php 和管理工作 - 没有其他页面响应

php - HTML 显示 5audio Player 并从 db 获取媒体

jquery - 单击图像的 url 时背景图像会发生变化

javascript - 如何迭代一系列 jquery 元素及其每个子元素?

javascript - 如何触发p :selectOneButton in jQuery的点击事件

javascript - for 循环 jquery javascript