Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

PhoneGap: How to make links from iframes open in InAppBrowser

I am using google dfp to serve ads in my PhoneGap project and these ads are rendered as iframes.

When a user clicks the ad, I would like the url to open in the InAppBrowser. As of now, it just opens the url in the WebView.

The anchor tag within the iframe has the target="_blank", but I believe because it's within the iframe, PhoneGap ignores this.

I know that the InAppBrowser is working for other links I have within my project, so I have ruled that out.

Here are some settings in my config.xml:

...

<feature name="InAppBrowser">
    <param name="ios-package" value="CDVInAppBrowser" />
</feature>
<feature name="InAppBrowser">
    <param name="android-package" value="org.apache.cordova.InAppBrowser" />
</feature>

...

<preference name="stay-in-webview" value="false" />

...

<access origin="*" />

This is what the rendered iframe looks like:

<div class="adunit display-block" data-adunit="example_app_section_front_footer" data-dimensions="320x50" id="example_app_section_front_footer-auto-gen-id-1">
    <div id="google_ads_iframe_/2444258/example_app_section_front_footer_0__container__" style="border: 0pt none;">
        <iframe id="google_ads_iframe_/2444258/example_app_section_front_footer_0" name="google_ads_iframe_/2444258/example_app_section_front_footer_0" width="320" height="50" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="someurl"  style="border: 0px; vertical-align: bottom;">
            <html>
                <body>
                    <div id="google_image_div">
                        <a id="aw0" target="_blank" href="http://googleads.g.doubleclick.net/aclk?someurl" onfocus="ss('aw0')" onmousedown="st('aw0')" onmouseover="ss('aw0')" onclick="ha('aw0')"><img src="http://pagead2.googlesyndication.com/simgad/000111222" border="0" width="320" height="50" alt="" class="img_ad"></a>
                    </div>
                </body>
            </html>        
        </iframe>
    </div>
</div>

I currently have some jQuery that checks all anchor tags that have a target of _blank and opens them in the InAppBrowser, however this function doesn't work with the rendered iframe:

$(document).on('click', 'a[target=_blank]', function (event) {
    event.preventDefault();
    window.open($(this).attr('href'), '_blank');
});

Any help would be appreciated.

like image 892
bigmike7801 Avatar asked May 30 '14 19:05

bigmike7801


1 Answers

As those are regular links and not cordova_exec calls, you need to subclass the CDVViewController and implement webView:shouldStartLoadWithRequest:navigationType as suggested above.

Make sure to call super in your implementation.


To subclass CDVViewController you'll have to write some native code.

At the very least something like:

// MyGapViewController.h

@interface MyGapViewController : CDVViewController

@end



// MyGapViewController.h

@implementation MyGapViewController

- (BOOL)webView:(UIWebView*)webView
shouldStartLoadWithRequest:(NSURLRequest*)request
 navigationType:(UIWebViewNavigationType)navigationType
{
    // Check if super says we should load it
    BOOL shouldLoad = [super webView:webView
          shouldStartLoadWithRequest:request
                      navigationType:navigationType];

    // If super says NO, then no need to continue
    if (!shouldLoad)
    {
        return NO;
    }

    // Else check here if it is one of our iframe links and do something about it...
    if (iFrame)
    {
        //...
        return NO; // We handled it no need to load the iframe link in the original web view
    }

    // Else load it here
    return YES;
}

@end
like image 138
Rivera Avatar answered Oct 27 '22 18:10

Rivera