Как принудительно использовать пользователя, нужно прокручивать 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);
}
});