如何强制用户必须在iframe中滚动pdf
我在iframe中有一个pdf文件。 我希望用户在提交表单之前滚动必须在pdf文件中。 我正在尝试这个，
var position = $('#myIframe').contents().scrollTop(); 但不工作。 请帮助我提前谢谢。
好吧，我已经尝试了将近一个小时，研究了它，最后得出结论，不幸的是，使用这种方法是不可能的 。
PDF通常不是DOM元素，它由PDF阅读器软件呈现。 每个浏览器都有自己的渲染PDF机制，没有标准。 在某些情况下，PDF可能由PDF.js呈现; 在这些情况下，您可能能够检测到滚动。 但Adobe Reader，Foxit和一些原生PDF渲染不提供该选项。
我也为此创建了一个Github 问题 。 但没用。
抱歉。 如果你能找到任何东西或任何解决方法，请更新我。
如果您不介意为iframe制作静态高度，我会为您提供解决方案。
HTML和CSS
1.将iframe包装在div容器中
2.设置容器和iframe的height （容器的height应该是您希望看到框架的height ，iframe height应该足够大以显示整个pdf。）
3.设置容器div的overflow以scroll
现在你有一个可滚动的“iframe”。
Javscript
- 获取容器元素。 （
var containerEl = $("#container")[0];） - 写一个
scrollfunction。 在scroll函数中，查找元素的总高度（scrollHeight）是否小于或等于滚动了多少（scrollTop）加上元素的内部高度（clientHeight）。 如果是，请从button删除disabled属性
这是小提琴 。 对@ mJunaidSalaat的jsfiddle做了一些修改。
我为你的解决方案做了一个小提琴 。 您可以为用户停用提交按钮，直到用户滚动您的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); } });
希望能帮助到你。
试试这个
$("#myIframe").ready(function() { var frame = getFrameTargetElement(document.getElementById("myIframe")); frame.onscroll = function(e) { $('.submitBtn').prop('disabled', false); } });