检测 AJAX 请求调用的 Iframe 的滚动事件
Posted
技术标签:
【中文标题】检测 AJAX 请求调用的 Iframe 的滚动事件【英文标题】：Detecting scroll event of Iframe called by AJAX reqest 【发布时间】：2018-07-30 23:48:44 【问题描述】：我的主页中有一个链接，该链接使用 ajax 检索显示在 iframe 中的 PDF，我正在尝试检测 PDF 文档的滚动事件并显示消息或执行某些操作。我在 *** 和谷歌搜索上尝试了与其他解决方案不同的解决方案，但找不到好的解决方案。
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"
type="application/pdf">
</iframe></div>';
?>
这里的主要问题是当我滚动 pdf 文档时没有任何反应，我如何检测滚动？
我发现这个小提琴有效，但我无法查看 javascript 解决方案。 http://fiddle.jshell.net/czw8pbvj/1/
【问题讨论】：
可能相关：***.com/q/43264078/1531971（如果不是，可能是 edit 问题解释为什么不。） 没有接受该问题的答案，我也尝试了投票最多的解决方案，但没有成功。 “它不起作用” 也许分享这意味着什么？假设没有人知道你想要做什么。 什么都没发生，我检查了 Web 控制台但没有错误 另外：***.com/q/33154598/1531971 或 ***.com/q/36193354/1531971 基本上，您将不得不通过展示您的研究来提供帮助；这就是它的工作原理。有人将不得不对回答感兴趣，这部分依赖于了解已经完成的基础工作。我们需要了解您的案例是什么导致这些解决方案不适合您。 【参考方案1】：首先，$("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 中找不到滚动事件。它仅列出以下事件：
事件类型：事件名称
应用程序：初始化
批处理：执行
书签：鼠标上移
控制台：执行
文档：DidPrint、DidSave、Open、WillClose、WillPrint、WillSave
外部：执行
字段：模糊、计算、聚焦、格式、击键、鼠标按下、鼠标进入、鼠标退出、鼠标向上、验证
链接：鼠标上移
菜单：执行
页面：打开、关闭
屏幕：InView、OutView、打开、关闭、聚焦、模糊、鼠标向上、鼠标向下、鼠标进入、鼠标退出
所以，基本上，我认为你想要的现在是不可能的，至少在默认渲染的情况下是不可能的。使用自定义渲染 (https://github.com/mozilla/pdf.js) 是可能的，但我不确定。
显然，它可以通过页面滚动来完成（请参阅this 问题）。所以回到 iframe 解决方案。 :^D
【讨论】：
没错，我只专注于更正您的代码。我会更新我的答案，但请检查 this 和 this one【参考方案2】：因为这个问题是很久以前问的，我想我需要帮助我的经验。
答案是：你不能
为什么？因为 PDF 是由外部应用程序呈现的，例如 adobe pdf reader、foxit 或其他。而且您不能在它们上附加事件。
如果您使用的是 adobe 阅读器，您唯一能做的就是转到页面、更改缩放等。您可以在此处阅读完整示例：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" >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
【讨论】：
感谢您抽出宝贵时间回答，我刚刚实现了您的回答，但我在 Web 控制台上找不到任何表明检测到事件的信息，您能否更新代码以使用alert('scrolling...');我试过使用警报，但滚动时没有弹出。【参考方案3】：
请试试这个
iframe.on( "scroll", handler )
【讨论】：
【参考方案4】：$("#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 选择器。
【讨论】：
它适用于嵌入式网页，但不适用于 pdf 文档【参考方案5】：我想这会对你有所帮助。
$("#myiframe").load(function ()
$(this).contents().scroll(function ()
//your code here
);
);
【讨论】：
以上是关于检测 AJAX 请求调用的 Iframe 的滚动事件的主要内容，如果未能解决你的问题，请参考以下文章
ajax 调用在我的 facebook iframe 中返回 null
javascript-如何检测 iframe 中的滚动事件？
如何在 HTML iFrame 中检测滚动条的存在（使用 Javascript）？