Как принудительно использовать пользователя, нужно прокручивать pdf в iframe

У меня есть файл pdf внутри iframe. Я хочу, чтобы пользователь прокручивал файл в формате pdf перед отправкой формы. я пытаюсь с этим,

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

Но не работает. Пожалуйста, помогите мне. Спасибо заранее.

Ответ 1

Ну, я пробовал почти час на этом, исследовал его, наконец, пришел к выводу, что к сожалению это невозможно, используя этот метод.

PDF, как правило, не является элементом DOM, он отображается с помощью программного обеспечения для чтения PDF. У каждого браузера есть свой механизм для рендеринга PDF файлов, нет стандарта. В некоторых случаях PDF может быть предоставлен PDF.js; в таких ситуациях вы можете обнаружить прокрутку. Но Adobe Reader, Foxit и некоторые из встроенных PDF-рендеринга не предоставляют эту опцию.

Я также создал для этого файл Github issue. Но бесполезно.

К сожалению. Пожалуйста, обновите меня, если вы найдете что-нибудь или обходное решение.

Ответ 2

Если вы не возражаете сделать статическую высоту для своего iframe, у меня есть решение для вас.

HTML и CSS
1. Оберните свой iframe в контейнер div
2. установите heights как для вашего контейнера, так и для iframe (height для контейнера должен быть height, который вам нужен, чтобы ваш кадр был замечен, а iframe height должен быть достаточно большим, чтобы отобразить весь файл pdf).
3. установите контейнер div overflow в scroll

Теперь у вас есть прокручиваемый "iframe".

Javscript

Получить элемент контейнера. (var containerEl = $("#container")[0];)
Напишите функцию scroll. В пределах функции прокрутки найдите, если общая высота элемента (scrollHeight) меньше или равна тому, сколько было прокручено (scrollTop) плюс внутренняя высота (clientHeight) элемент. Если это так, удалите свойство disabled из button

Здесь fiddle. Сделал некоторые изменения в @mJunaidSalaat jsfiddle.

Ответ 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);
   }
});

Надеюсь, что это поможет.

Ответ 4

попробуйте это

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

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