I am loading local HTML file in IFrame using HTML/Javascript in windows store development(Windows 8). I am trying get Swipe event from Iframe.
I tried with this sample & this. I fallowed the Mouse wheel scenario which contains one div element. For Iframe it doesn't work.
My code:
<body>
<iframe id="iframe_Id" src="split.html" style="height:768px; width:1366px;" onload="Load();"></iframe>
</body>
function Load() {
var elt = document.getElementById("iframe_Id");
elt.style.backgroundColor = "#f3f3f3";
var gobj = new MSGesture();
// Defining gesture object for Pen, mouse and touch
gobj.target = elt;
elt.gesture = gobj;
elt.gesture.pointerType = null;
// Creating event listeners for gesture elements
elt.addEventListener("MSPointerDown", onPointerDown, false);
elt.addEventListener("MSGestureTap", onTap, false);
elt.addEventListener("MSGestureHold", onHold, false);
elt.addEventListener("MSGestureChange", onGestureChange, false);
// Mouse Wheel does not generate onPointerUp
elt.addEventListener("MSGestureEnd", onGestureEnd, false);
}
function onPointerDown(e) {
var content = document.getElementById("iframe_Id");
}
I created functions for all the events. But when swipe in my IFrame the event not raised. I structured here. I need to work with Swipe. Please help me to out from this.
I am loading local HTML file in IFrame using HTML/Javascript in windows store development(Windows 8). I am trying get Swipe event from Iframe.
I tried with this sample & this. I fallowed the Mouse wheel scenario which contains one div element. For Iframe it doesn't work.
My code:
<body>
<iframe id="iframe_Id" src="split.html" style="height:768px; width:1366px;" onload="Load();"></iframe>
</body>
function Load() {
var elt = document.getElementById("iframe_Id");
elt.style.backgroundColor = "#f3f3f3";
var gobj = new MSGesture();
// Defining gesture object for Pen, mouse and touch
gobj.target = elt;
elt.gesture = gobj;
elt.gesture.pointerType = null;
// Creating event listeners for gesture elements
elt.addEventListener("MSPointerDown", onPointerDown, false);
elt.addEventListener("MSGestureTap", onTap, false);
elt.addEventListener("MSGestureHold", onHold, false);
elt.addEventListener("MSGestureChange", onGestureChange, false);
// Mouse Wheel does not generate onPointerUp
elt.addEventListener("MSGestureEnd", onGestureEnd, false);
}
function onPointerDown(e) {
var content = document.getElementById("iframe_Id");
}
I created functions for all the events. But when swipe in my IFrame the event not raised. I structured here. I need to work with Swipe. Please help me to out from this.
Share Improve this question edited Nov 7, 2013 at 10:08 Lugia101101 6711 gold badge7 silver badges21 bronze badges asked Oct 29, 2013 at 10:14 KumarKumar 8741 gold badge22 silver badges49 bronze badges2 Answers
Reset to default 5 +50If split.html is a local file, you should listen for the events from within the iframe. You can then use parent.postMessage() to municate up to the host/parent HTML page.
Alternatively, you can investigate the new WebView control available to HTML/JavaScript apps in Windows 8.1.
You should put your <iframe> inside a <div> block, like this :
<body>
<div id="watch">
<iframe id="iframe_Id" src="split.html" style="height:768px;
width:1366px;" onload="Load();">
</iframe>
</div>
</body>
And then you look the swipe in the div#watch instead of the iframe, because the touch event will be in the DOM and not in the iframe.