如何强制用户必须在iframe中滚动pdf

Question

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

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

但不行.请帮助我提前谢谢.

Answer 1

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

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

我还为此创建了一个 Github问题。但没有用。

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

Answer 2

如果您不介意为iframe设置静态高度，那么我会为您提供解决方案。

HTML和CSS
1.将iframe包裹在div容器中
。2. heights为容器和iframe都设置（height容器应该是height您希望看到的框架，并且iframe height应该足够大以显示整个pdf。）
3.设置容器div overflow到scroll

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

Javscript

1. 获取容器元素。（var containerEl = $("#container")[0];）
2. 编写一个scroll函数。在滚动功能中，查找元素的总高度（scrollHeight）是否小于或等于滚动了多少（scrollTop）加上clientHeight元素的内部高度（）。如果是这样，请disabled从button

这是小提琴。对@mJunaidSalaat的jsfiddle进行了一些更改。

Answer 3

我为你的解决方案制作了一个小提琴。您可以禁用用户的提交按钮，直到用户在您的 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);
   }
});

希望能帮助到你。