Search code examples
.netiosmobile-safarilinkbutton

Getting .NET linkbuttons to work in iOS web app

I have a web site which can be added as an icon to the iPhone/iPad home screen (as all web sites can). When tapping the icon the web site shows up in full screen mode (yay). To prevent all links on this web site to open up in safari and thereby go away from the full screen mode, I'm overriding the click event of all html anchors. This works great, but not on .NET linkbuttons, probably because they need to make a postback.

This is my code:

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false);
if (iOS) {
    $("a").click(function (event) {
        var href = $(this).attr("href");
        if (href.indexOf("doPostBack") == -1 && href.indexOf("javascript") == -1) {
            event.preventDefault();
            window.location = $(this).attr("href");
        }
    });
}

As you can see I'm trying to prevent this special behavior if the href contains "doPostBack" (which Linkbuttons do), or if they contain "javascript" (this is for links with e.g. onclick='xxx()'). This doesn't work though. Links created with Linkbutton doesn't respond, and I have no idea why.

Any help at all is much appreciated. Thanks

Solution

  • Alright. I finally solved this after a long session dedicated to the problem. Jump down to the end if you just want the solution.

    First of all, it's not just linkbuttons, it's everything that makes a postback with javascript. It could be a dropdownlist with autopostback = true, the same with ASP.NET checkboxes and so on. = A huge problem..

    First i figured out that the user-agent differs for iPhone/iPad when you go full screen. The first one is Safari and the second one is full screen "app".

    Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A405 Safari/7534.48.3
Mozilla/5.0 (iPad; CPU OS 5_0_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Mobile/9A405

    So. Whats happening here? Well, .NET's browser definition files doesn't recognize the second user-agent and it's defaulting to "Mozilla", a very standarized and low level browser definition with very low capabilities. I tried creating a custom browser file where I defined a "new" browser, matching user-agents with regex: If it contained iPhone/iPad/iPod - tell .NET this is a Safari browser, not Mozilla. Unfortunelately I didn't manage to get it to work. Neither by adding the file to the App_Browsers folder or registering the file globally with the framework.

    Anyway. I continued searching for a solution and found a workaround which I modified a bit. In your page's PreInit method (or rather your basepage's PreInit method) do this:

    protected void Page_PreInit(object sender, EventArgs e)
{
    if (Request.UserAgent != null && (Request.UserAgent.Contains("iPhone") || Request.UserAgent.Contains("iPad") || Request.UserAgent.Contains("iPod")))
        this.ClientTarget = "uplevel";
}

    This will make the browser look like IE6 to .NET which will make everything works perfectly. A heads up: If you are detecting for old browsers (IE 6 for example) anywhere in your code. Make sure it still works after this workaround. I had to add an extra if statement to exclude iOS devices from beeing redirected to my "you-got-an-old-browser-page".