- February 8, 2017
- Posted by: iSummation Team
- Category: Uncategorized
Recently one of our client report scrolling issue when they try to view their website on iPad (or any mobile device). Page they are looking has iframe with scroll so basically two scrolls on browser but when user trying to scroll within iframe anyhow iOS browser doesn’t able to recognize it and always scroll main window. I have gone through iPad guide provided Apple which mention that we can scroll within iframe by two fingers and use single finger to main window. I tried but doesn’t work for me (may be it support new iPad only) and ask client to do so but it doesn’t work for him as well.
But why iFrame? Well, this is client’s choice. Client used to have windows application before move to web based application and like to have everything on single browser window only, with close button (like old visual basic window based project have) on corner to close window and get back to previous window. In that case I have only iFrame is better option. I integrate with CFWINDOW (ColdFusion’s tag to generate div based window) to give better window kind of look. Some of page open inside iFrame has long content and cause scroll within iFrame, that never harm in PC based browser but mobile device anyhow not able to figure it out which scroll user want to scroll. As a solution I need to detect browser type and if it is from mobile device open separate window instead of iFrame. That is really easy for me because I am using single function to open any page URL in virtual window (this is what client says for iFrame). But this is not end here as sometimes we are used to have some function call whenever CFWINDOW closed to refresh entire page or update status using Ajax request. CFWINDOW has its own onclose event which we bind to customize our requirement but for mobile device request as we are going to open separate window we require to bind onunload/onbeforeunload event of new open window.
‘onbeforeunload’ event doesn’t work with iOS safari browser so don’t even try to work on that otherwise you are going to waste your time (As I did). I have only option to bind ‘onunload’ event. Again I found that on main page when I bind ‘onunload’ event fire twice, 1. when page open in new window 2. when I close open window. Actually I was thinking that it should call on second option only. I tried to create sample example to check on PC based browser and same here Firefox, Chrome and Safari call ‘onunload’ event when window open and when I close window (or navigate to another link from there) but in IE seems call only once when I closed open window or navigate to another link from there (This is first time ever IE impressed me lol). After bit of debugging found that Firefox, Chrome and Safari open window with URL ‘about:blank’ and then change location to my actual page URL that I like to load and this is why first time my ‘onunload’ event called. I want to call customized function only when user close window (not when it open), mean second ‘onload’ event call, I don’t’ want to use any global variable to track request call as it can be overwrite by other function call or may be because this function I was using all over system. As I mention above first call was due to ‘about:blank’ URL open first time in browser so easiest way to find out my actual onunload event call by comparing location.href is not ‘about:blank’ and that worked. May be this hack and not perfect solution but it works and this is enough to implement it. I love if guys can comment on that and can build better option.
Below is code I used to simulate same issue with two files test.cfm and test1.cfm
Test.cfm
[code:html]<html>
<head>
<script src="/js/jquery-1.4.2.min.js?#Application.version#" type="text/javascript"></script>
<script >
function callWindow(){
var win =window.open(‘test1.cfm’);
if(win.attachEvent)
win.attachEvent("onunload",pageUnloaded);
else if(win.addEventListener)
win.addEventListener("unload",pageUnloaded);
else
win.onunload = pageUnloaded;
$(win).on("unload",pageUnloaded);
}
var pageonbeforeunload =function(){
console.log(‘beforeunload’);
};
var pageUnloaded =function(){
if(this.location.href != ‘about:blank’)
alert(this.location.href);
}
</script>
</head>
<body>
<a href="javascript:callWindow()">Call Window</a>
</body>
</html>[/code]
Test1.cfm
[code:html]<html>
<head>
</head>
<body>
Hello
<a href="http://www.google.com">Google</a>
</body>
</html>[/code]