我有一个 HTML 文档，其中包含 3 个 iframe，分别代表上一页、当前页面和下一页。我试图启用页面滑动(通过 jQuery touchswipe 插件)，但也让点击进入 iframe 内的文档。这是 HTML:
<body>
<div id="pages-wrapper">
<div id="page1" class="page-div previous-page">
<iframe id="frame1" class="page-frame"></iframe>
</div>
<div id="page2" class="page-div active-page">
<iframe id="frame2" class="page-frame"></iframe>
</div>
<div id="page3" class="page-div next-page">
<iframe id="frame3" class="page-frame"></iframe>
</div>
</div>
</body>
当 pages-wrapper 元素被滑动时，上一页或下一页成为事件页面。页面大小为 100%，事件页面填满浏览器的视口(viewport)。一切都在同一个域内。 iframe 的文档可以包含带有图像映射的图像。
不幸的是，iframe 捕获鼠标事件，禁用父页面上的滑动功能。正如其他人所建议的那样，答案是覆盖一个透明的 div，使用 elementFromPoint 在 iframe 的文档中定位目标，然后手动向目标发送点击事件。
我已经使用 coverIframes plugin 实现了这个:
$.fn.coverIframes = function(){
$.each($("iframe",this),function(i,v){
var ifr = $(v);
var wr = $("<div id='wr"+new Date().getTime()+i+"' style='z-index: 999999; opacity: 0; position:absolute; width:100%;'></div>");
ifr.before(wr);
wr.height(ifr.height());
wr.click(function(event){
var iframe = ifr.get(0);
var iframeDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;
// Find click position (coordinates)
var x = event.offsetX;
var y = event.offsetY;
// Trigger click inside iframe
var link = iframeDoc.elementFromPoint(x, y);
var newEvent = iframeDoc.createEvent('HTMLEvents');
newEvent.initEvent('click', true, true);
link.dispatchEvent(newEvent);
});
})
};
虽然这种方法适用于大多数元素，但它不适用于图像 map 的区域——至少在 Chrome 浏览器(版本 32)中是这样。在这些情况下，它返回 null。在尝试寻找解决方法时，我想到了以下 3 个问题:
有没有办法将父级中的点击事件直接传递给 iframe 窗口，并让它像用户点击窗口一样处理该事件？ (即，窗口找到目标，并通过 dom 的元素冒泡事件。)
是否有任何类似于 elementFromPoint 的替代函数可以可靠地返回目标元素？
如果我想手动处理某个区域的空结果，是否有现有的 JavaScript 函数或 jQuery 插件可以确定给定点是否在 map 区域内？ (我见过一些用于在多边形中查找点的函数。)
最佳答案
我不会告诉您如何使用透明覆盖和事件捕获。我已经这样做了，它可以工作，但不值得。
不过别担心，好消息是:我们有 AJAX!
不要使用 iframe为了这;您可以轻松消除拥有多个窗口对象的所有麻烦。如果所有页面都像你说的一样在同一个域中，请使用 $.ajax({url:'XXX.html'})获取内容并将其加载到 <div id='page1'></div>相反。
就像这个例子:https://jsfiddle.net/q69d0L63/
想法:
1) 如果请求的页面不在同一个域中，则它们可能需要一个 CORS header (但你说的是同一个域，所以没问题)。
2) 请求的 URL 内容不必是完整的 HTML 文档，它可以只是 HTML 文档片段。
示例代码(由于 header ，不适用于 SO，但适用于 JSFiddle。要验证，请在单击时监控 JS 控制台和网络流量):
var urls = ['page1.html', 'page2.html', 'page3.html']; // just an example; test data
var curIdx = -1;
swipe = function(e) {
getNextPage();
}
getNextPage = function() {
curIdx = (curIdx + 1) % 3;
var url = urls[curIdx];
$("#page_content").html('Loading...');
$.ajax({
url: url,
async: true,
success: function(data) {
var html = $(data).find("span:first"); // filter input if desired
$("#page_content").html(html.html());
},
error: function(jqXHR, status, error) {
$("#page_content").html([status, error].join(': '));
}
});
}
getNextPage();#page_content {
background-color: #eee;
padding: 10px;
font-family: 'Segoe UI', Arial;
font-size: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='button' value='Touch or click to simulate swipe' onclick='swipe();' />
<h3>Content loaded by AJAX</h3>
<div id='page_content'></div>
关于javascript - 在 iframe 上滑动，传递点击事件，并且 elementFromPoint 在图像映射区域返回 null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21344007/
我没有找到太多关于如何执行此操作的信息，尽管有很多关于如何使用像这样的redirect_to将参数传递给重定向的建议:action=>'something',:controller=>'something'在我的应用程序中，我在路由文件中有以下内容match'profile'=>'User#show'我的表演Action是这样的defshow@user=User.find(params[:user])@title=@user.first_nameend重定向发生在同一个用户Controller中，就像这样defregister@title="Registration"@user=Use
我正在使用RubyonRails3.0.9，我想生成一个传递一些自定义参数的link_toURL。也就是说，有一个articles_path(www.my_web_site_name.com/articles)我想生成如下内容:link_to'Samplelinktitle',...#HereIshouldimplementthecode#=>'http://www.my_web_site_name.com/articles?param1=value1¶m2=value2&...我如何编写link_to语句“alàRubyonRailsWay”以实现该目的？如果我想通过传递一些
我有带有Logo图像的公司模型has_attached_file:logo我用他们的Logo创建了许多公司。现在，我需要添加新样式has_attached_file:logo,:styles=>{:small=>"30x15>",:medium=>"155x85>"}我是否应该重新上传所有旧数据以重新生成新样式？我不这么认为……或者有什么rake任务可以重新生成样式吗？ 最佳答案 参见Thumbnail-Generation.如果rake任务不适合你，你应该能够在控制台中使用一个片段来调用重新处理!关于相关公司
是否有简单的方法来更改默认ISO格式(yyyy-mm-dd)的ActiveAdmin日期过滤器显示格式？ 最佳答案 您可以像这样为日期选择器提供额外的选项，而不是覆盖js:=f.input:my_date,as::datepicker,datepicker_options:{dateFormat:"mm/dd/yy"} 关于ruby-on-rails-事件管理员日期过滤器日期格式自定义，我们在StackOverflow上找到一个类似的问题： https://s
如何在Ruby中按名称传递函数？(我使用Ruby才几个小时，所以我还在想办法。)nums=[1,2,3,4]#Thisworks,butismoreverbosethanI'dlikenums.eachdo|i|putsiend#InJS,Icouldjustdosomethinglike:#nums.forEach(console.log)#InF#,itwouldbesomethinglike:#List.iternums(printf"%A")#InRuby,IwishIcoulddosomethinglike:nums.eachputs在Ruby中能不能做到类似的简洁？我可以只
本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决
我在破坏脚本的字符串中出现了一些奇怪的字符。据我所知，通过putbadstring到控制台，它们是"\0\0\0\0"。我想对此进行测试，以便我可以忽略它们...但是如何呢？以为这就是blank?和empty?的用途？!？:>badstring="\0"=>"\u0000">badstring.blank?NoMethodError:undefinedmethod`blank?'for"\u0000":Stringfrom(irb):97from/Users/meltemi/.rvm/rubies/ruby-2.0.0-p195/bin/irb:16:in`'>badstring.em
我正在尝试使用Ruby2.0.0和Rails4.0.0提供的API从imgur中提取图像。我已尝试按照Ruby2.0.0文档中列出的各种方式构建http请求，但均无济于事。代码如下:require'net/http'require'net/https'defimgurheaders={"Authorization"=>"Client-ID"+my_client_id}path="/3/gallery/image/#{img_id}.json"uri=URI("https://api.imgur.com"+path)request,data=Net::HTTP::Get.new(path
2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).