检测由AJAX请求调用的Iframe的滚动事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了检测由AJAX请求调用的Iframe的滚动事件相关的知识，希望对你有一定的参考价值。
我在我的主页面中有一个链接，它使用ajax来检索在iframe中显示的PDF，我正在尝试检测PDF文档的滚动事件并显示消息或执行某些操作。我已经在stackoverflow和谷歌搜索上尝试了其他解决方案的不同解决方案，但无法找到一个好的解决方案。
Main.php
<html>
<!--ajax request-->
<script type="text/javascript">
$(document).on('click','#nextpdf',function(event) {
event.preventDefault();
var reg = $(this).attr("href");
var str = reg.split('?')[1];
$.ajax({
type: "GET",
url: '../functions/pdfreader.php',
data: 'pdfxs='+str+'',
cache:false,
async: false,
success: function(data) {
// data is ur summary
$('.refresh').html(data);
return false;
}
});//end of ajax
});
</script>
<?php
while($obj = $c_content->fetch())
{
$title = $obj['lecture_title'];
echo '<article class="comment2">
//pdf link
<div class="comment2-body">
<div class="text" style="color:#999;padding-right:130px;">
<p><a href="../functions/pdfreader.php?'.$title.'""
style="color:#999" id="nextpdf">'.$title.'</a></p>
</div>
</div>
</article>
';
}
?>
</html>
pdfreader.php
//detect iframe pdf scroll
<script type="text/javascript">
$("myiframe").load(function () {
var iframe = $("myiframe").contents();
$(iframe).scroll(function () {
alert('scrolling...');
});
});
</script>
<?php
........
while($obj = $gettrend->fetch())
{
$coursefile = $obj['lecture_content'];
//this is my iframe
echo '<div class="mov_pdf_frame"><iframe id="myiframe"
src="https://localhost/einstower/e-learn/courses/pdf/'.$coursefile.'"
id="pdf_content"
width="700px" height="800px" type="application/pdf">
</iframe></div>';
}
?>
这里的主要问题是当我滚动pdf文档时没有任何反应，我如何检测滚动？
我发现这个小提琴有效，但我无法查看javascript解决方案。 http://fiddle.jshell.net/czw8pbvj/1/
因为很久以前就问这个问题，我想我需要先帮助我的经验。
答案是：你做不到
为什么？因为PDF是由外部应用程序呈现的，例如adobe pdf reader，foxit等。你不能在他们身上附上活动。
如果您使用的是adobe reader，您唯一能做的就是转到页面，更改缩放等。您可以在这里阅读完整示例：https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf#page=8（请参阅。我将您带到第8页而不是第一页）。
但是，嘿..如果我们的客户使用其他应用程序怎么样？我们会更加困惑
这样做的方法是只构建自己的pdf查看器。
我们可以使用js库，如：http://www.bestjquery.com/2012/09/best-jquery-pdf-viewer-plugin-examples/
但在这里我只会告诉你使用由mozilla创建的pdf.js。
main.php
<style>
.preview{
display:none;
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
<a href="pdfreader.php?pdfxs=test.pdf" style="color:#999;" id="nextpdf">file/test.pdf</a><br>
<a href="pdfreader.php?pdfxs=test1.pdf" style="color:#999;" id="nextpdf">file/test1.pdf</a><br>
<div class="preview">
<iframe id="myiframe" frameborder="0" width="400px" height="400px" >not support iframe</iframe>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(document).on('click', '#nextpdf', function(e){
e.preventDefault();
$('#myiframe').attr('src', $(this).attr('href'));
$('.preview').show();
});
//handle iframe on scroll
$('#myiframe').on('load', function () {
$(this).contents().scroll(function () {
console.log('scrolled');
}).click(function(){
console.log('clicked');
});
});
});
</script>
pdfreader.php
<?php
$path = 'file/';
$pdf = isset($_GET['pdfxs']) ? $path . $_GET['pdfxs'] : '';
if(!file_exists($pdf) || !mime_content_type($pdf) =='application/pdf') die('file not found');
?>
<div id="pdf-container">
<div id="pdf-box"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<script>
$(function(){
//original script : https://gist.github.com/fcingolani/3300351
function renderPDF(url, canvasContainer, options) {
var options = options || { scale: 1 };
function renderPage(page) {
var viewport = page.getViewport(options.scale);
var canvas = $(document.createElement('canvas'));
var renderContext = {
canvasContext: canvas[0].getContext('2d'),
viewport: viewport
};
canvas.attr('width', viewport.width).attr('height', viewport.height);
canvasContainer.append(canvas);
page.render(renderContext);
}
function renderPages(pdfDoc) {
for(var num = 1; num <= pdfDoc.numPages; num++)
pdfDoc.getPage(num).then(renderPage);
}
PDFJS.disableWorker = true;
PDFJS.getDocument(url).then(renderPages);
}
renderPDF('<?=$pdf;?>', $('#pdf-box'));
});
</script>
注意：我把pdf放在文件夹file/上
在main.php中，您会注意到您可以将事件滚动（并点击）附加到pdf。因为我们的pdf现在不是由外部应用程序呈现的。
最后一部分是，如果你仔细阅读pdfreader.php，你会注意到你不再需要iframe了。你只需要div，然后你可以完全处理你想要的pdf所有事件：如滚动，点击，更改页面，缩放等等为什么？因为你的pdf现在被渲染为画布（pdf.js将你的pdf渲染为HTML5画布）。见full example of pdf.js
首先，$("myiframe")没有找到任何东西，因此它将负载事件无关紧要。 1）将其更改为$("#myiframe")或$("iframe")。
Here's a working fiddle (for iframe scroll detection)
更新：要检测PDF文档中的滚动，您不能使用iframe。为此，您需要embed或object标签和一个支持JS的PDF文档（希望它是您的PDF文件..），谁可以向您的页面的JS发送消息（请参阅this answer）。
不幸的是，我在Adobe's Acrobat API Reference找不到滚动事件。它仅列出以下事件：
事件类型：事件名称
应用程序：初始化
批处理：执行
书签：鼠标向上
控制台：执行
Doc：DidPrint，DidSave，Open，WillClose，WillPrint，WillSave
外部：执行
字段：模糊，计算，聚焦，格式，击键，鼠标按下，鼠标输入，鼠标退出，鼠标向上，验证
链接：鼠标向上
菜单：执行
页面：打开，关闭
屏幕：InView，OutView，打开，关闭，聚焦，模糊，鼠标向上，鼠标向下，鼠标输入，鼠标退出
所以，基本上，我认为你想要的只是现在不可能，至少在默认渲染方面。使用自定义渲染（https://github.com/mozilla/pdf.js）它是可能的，虽然我不确定。
显然，它可以通过页面滚动来完成（请参阅this问题）。所以回到iframes解决方案。 :^D
请试试这个
iframe.on( "scroll", handler )
$("#frame").scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height())
alert('Bottom reached');
});
我在JSFiddle that was referenced in the Fiddle you linked找到了这个。 HTML字段为空。这个CSS也在那里。
body {
height: 1500px;
}
在您链接的小提琴中，<iframe>的ID为frame。我想你可以像$("#frame")一样使用jQuery选择器。
我想这会对你有所帮助。
$("#myiframe").load(function () {
$(this).contents().scroll(function () {
//your code here
});
});
以上是关于检测由AJAX请求调用的Iframe的滚动事件的主要内容，如果未能解决你的问题，请参考以下文章
javascript-如何检测 iframe 中的滚动事件？
ajax 调用在我的 facebook iframe 中返回 null
CefSharp.WinForms 使用手册（跨域请求、调用Vue方法）
完成所有 jquery ajax 请求后如何调整 iframe 的大小