个人中心
文章发布
退出
作者热门文章
- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
24
4
我有一个 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/
24
4
0
Github:https://github.com/jjvang/PassIntentDemo 我一直在关注有关按 Intent 传递对象的教程:https://www.javacodegeeks.c
我有一个 View ，其中包含自动生成的 text 类型的 input 框。当我单击“通过电子邮件发送结果”按钮时，代码会将您带到 CalculatedResults Controller 中的 Em
我有一个基本的docker镜像，我将以此为基础构建自己的镜像。我没有基础镜像的Dockerfile。 基本上，基本镜像使用两个--env arg，一个接受其许可证，一个选择在容器中激活哪个框架。我可以
假设我想计算 2^n 的总和，n 范围从 0 到 100。我可以编写以下内容: seq { 0 .. 100 } |> Seq.sumBy ((**) 2I) 但是，这与 (*) 或其他运算符/函数不
我有这个网址: http://www.example.com/get_url.php?ID=100&Link=http://www.test.com/page.php?l=1&m=7 当我打印 $_G
我想将 window.URL.createObjectURL(file) 创建的地址传递给 dancer.js 但我得到 GET blob:http%3A//localhost/b847c5cd-aa
我想知道如何将 typedef 传递给函数。例如: typedef int box[3][3]; box empty, *board[3][3]; 我如何将 board 传递给函数？我
我正在将一些代码从我的 Controller 移动到核心数据应用程序中的模型。 我编写了一个方法，该方法为我定期发出的特定获取请求返回 NSManagedObjectID。 + (NSManagedO
为什么我不能将类型化数组传递到采用 any[] 的函数/构造函数中？ typedArray = new MyType[ ... ]; items = new ko.observableArray(ty
我是一名新的 Web 开发人员，正在学习 html5 和 javascript。 我有一个带有“选项卡”的网页，可以使网页的某些部分消失并重新出现。 链接如下: HOME 和 JavaScript 函
我试图将对函数的引用作为参数传递 很难解释 我会写一些伪代码示例 (calling function) function(hello()); function(pass) { if this =
我在尝试调用我正在创建的 C# 项目中的函数时遇到以下错误: System.Runtime.InteropServices.COMException: Operation is not allowed
使用 ksh。尝试重用当前脚本而不修改它，基本上可以归结为如下内容: `expr 5 $1 $2` 如何将乘法命令 (*) 作为参数 $1 传递？ 我首先尝试使用“*”，甚至是\*，但没有用。我尝试
我一直在研究“Play for Java”这本书，这本书非常棒。我对 Java 还是很陌生，但我一直在关注这些示例，我有点卡在第 3 章上了。可以在此处找到代码:Play for Java on Gi
我知道 Javascript 中的对象是通过引用复制/传递的。但是函数呢？ 当我跳到一些令人困惑的地方时，我正在尝试这段代码。这是代码片段: x = function() { console.log(
我希望能够像这样传递参数: fn(a>=b) or fn(a!=b) 我在 DjangoORM 和 SQLAlchemy 中看到了这种行为，但我不知道如何实现它。 最佳答案 ORM 使用 specia
在我的 Angular 项目中，我最近将 rxjs 升级到版本 6。现在，来自 npm 的模块(在 node_modules 文件夹内)由于一些破坏性更改而失败(旧的进口不再有效)。我为我的代码调整了
这个问题在这里已经有了答案: The issue of * in Command line argument (6 个答案) 关闭 3 年前。 我正在编写一个关于反向波兰表示法的 C 程序，它通过命
$(document).ready(function() { function GetDeals() { alert($(this).attr("id")); } $('.filter
下面是一个例子： 复制代码 代码如下: use strict; #这里是两个数组 my @i =('1','2','3'); my @j =('a','b','c'); &n
我是一名优秀的程序员,十分优秀！