Question

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

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

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

Answer 1

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

HTML和CSS
1.将您的iframe包裹在div容器中 2.为容器和iframe设置heights（容器的height应该是height您想要查看框架，而iframe height应该足够大显示整个pdf。）
3.将容器div overflow设置为scroll

现在你有一个可滚动的＆＃34; iframe＆＃34;。

<强> Javscript

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

button

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

Answer 2

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

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

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

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

Answer 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);
   }
});

希望它有所帮助。

Answer 4

试试这个

$("#myIframe").ready(function() {
  var frame = getFrameTargetElement(document.getElementById("myIframe"));

  frame.onscroll = function(e) {
    $('.submitBtn').prop('disabled', false);
  }
});

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

4 个答案: