How To Enforce User Must Scroll Pdf Within Iframe

I have a pdf file within iframe. I want user to scroll must in pdf file before submitting the form. i am trying with this, var position = $('#myIframe').contents().scrollTop();

Solution 1:

If you don't mind making a static height for your iframe, I have a solution for you.

HTML and CSS
1. Wrap your iframe in a div container
2. set heights for both your container and iframe (height of container should be the height you want your frame to be seen and the iframe height should be large enough to show entire pdf.)
3. set container div's overflow to scroll

Now you have a scrollable "iframe".

Javscript

1. Get container element. (var containerEl = $("#container")[0];)
2. Write a scroll function. Within the scroll function find if the total height of the element (scrollHeight) is less than or equal to how much has been scrolled (scrollTop) plus the inner height (clientHeight) of the element. If it is, remove disabled property from button

Here's the fiddle. Made some changes to @mJunaidSalaat's jsfiddle.

Solution 2:

Well I've tried almost an hour on this, Researched it, finally coming to a conclusion that Unfortunately this is not possible using this method.

The PDF is usually not a DOM element, it's rendered by PDF reader software. Every browser has its own mechanism for rendering PDFs, there is no standard. In some cases, the PDF might be rendered by PDF.js; in those situations you might be able to detect scrolling. But Adobe Reader, Foxit, and some of the native PDF rendering don't provide that option.

I've also created a Github issue for this. But no use.

Sorry. Please update me if you could find any thing or any workaround.

Solution 3:

I've made a Fiddle for your solution. You can disable the submit button for user until user scroll on your 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);
   }
});

Hope it helps.

Solution 4:

try this

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

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