【问题标题】:How to enforce user must scroll pdf within iframe如何强制用户必须在 iframe 内滚动 pdf
【发布时间】:2016-03-24 04:34:00
【问题描述】:

我在 iframe 中有一个 pdf 文件。我希望用户在提交表单之前必须在 pdf 文件中滚动。我正在尝试这个,

var position = $('#myIframe').contents().scrollTop();  

但不工作。请帮助我提前谢谢。

【问题讨论】:

  • 如何在 iframe 中加载 pdf?你能分享一些它的代码示例和表单的html吗?

标签: javascript jquery


【解决方案1】:

如果您不介意为 iframe 制作静态高度,我可以为您提供解决方案。

HTML 和 CSS
1. 将您的 iframe 包装在 div 容器中
2. 为您的容器和 iframe 设置heights(容器的height 应该是您希望看到您的框架的height,并且iframe height 应该足够大以显示整个pdf。)
3.设置容器div的overflowscroll

现在您有了一个可滚动的“iframe”。

JavaScript

  1. 获取容器元素。 (var containerEl = $("#container")[0];)
  2. 写一个scroll函数。在滚动函数中查找元素的总高度 (scrollHeight) 是否小于或等于已滚动的高度 (scrollTop) 加上内部高度 (clientHeight) 元素。如果是,请从 button 中删除 disabled 属性

这是fiddle。对@mJunaidSalaat 的 jsfiddle 进行了一些更改。

【讨论】:

    【解决方案2】:

    好吧,我已经尝试了将近一个小时,研究了它,最后得出结论,不幸的是这是不可能的使用这种方法。

    PDF 通常不是 DOM 元素,它是由 PDF 阅读器软件呈现的。每个浏览器都有自己的 PDF 渲染机制,没有标准。在某些情况下,PDF 可能由 PDF.js 呈现;在这些情况下,您可能能够检测到滚动。但 Adob​​e Reader、Foxit 和一些原生 PDF 渲染不提供该选项。

    我还为此创建了一个 Github issue。但是没用。

    对不起。如果您能找到任何东西或任何解决方法,请更新我。

    【讨论】:

    • 对不起,我花了很多时间。但遗憾的是没有成功。
    【解决方案3】:

    我已为您的解决方案创建了Fiddle。您可以禁用用户的提交按钮,直到用户在您的 iframe 上滚动。

    function getFrameTargetElement(objI) {
      var objFrame = objI.contentWindow;
      if (window.pageYOffset == undefined) {
        objFrame = (objFrame.document.documentElement) ? objFrame.document.documentElement : objFrame = document.body;
      }
      return objFrame;
    }
    
    $("#myIframe").ready(function() {
       var frame = getFrameTargetElement(document.getElementById("myIframe"));
    
       frame.onscroll = function(e) {
         $('.submitBtn').prop('disabled', false);
       }
    });
    

    希望对你有帮助。

    【讨论】:

    • 谢谢。请代替 html(这是一个 iframe)我想要 pdf 文件。
    • 并评论 //$('#iframe1').contents().find('html') .html("...");然后不工作
    【解决方案4】:

    试试这个

    $("#myIframe").ready(function() {
      var frame = getFrameTargetElement(document.getElementById("myIframe"));
    
      frame.onscroll = function(e) {
        $('.submitBtn').prop('disabled', false);
      }
    });
    

    【讨论】:

      猜你喜欢
      • 2016-07-08
      • 2019-04-22
      • 1970-01-01
      • 1970-01-01
      • 2014-09-02
      • 2013-03-28
      • 2017-10-03
      • 2017-12-07
      • 2016-12-19
      相关资源
      最近更新 更多