CODEWITHSUNDEEP
ionic-frameworkcordova-pluginsinappbrowser
student
student

Reputation: 31

Ionic Android inappbrowser plugin - set all links in iframe to open in system browser

How could I set all links inside iframe to open in system web browser, instead of WebView? I'm using inappbrowser plugin.

<ion-view style="" title="iframe">
<ion-content class="has-header" overflow-scroll="true" padding="true">
    <div style="" class="list card">
        <div class="item item-divider-android">iframe content</div>
        <div class="item item-body-android">
            <div style="">
                <center>
<iframe src='{{trustSrc(iframe.src)}}' frameborder="0" width="100%"    height="500" scrolling="yes"></iframe></center>
                 </div>
            </div>
       </div>
    </ion-content>

Upvotes: 2

Views: 1165

Answers (1)

arainone
arainone

Reputation: 1998

I found this solution in that gist (I didn't write it). Basically it declares an angular filter that converts href links into window.open that opens the links using inappbrowser plugin

var myApp = angular.module('myApp', ['ngSanitize']);

myApp.filter('hrefToJS', function ($sce, $sanitize) {
    return function (text) {
        var regex = /href="([\S]+)"/g;
        var newString = $sanitize(text).replace(regex, "onClick=\"window.open('$1', '_blank', 'location=yes')\"");
        return $sce.trustAsHtml(newString);
    }
});

myApp.controller('MyCtrl', function ($scope) {
    $scope.html = "This a link: <a href='https://www.google.com'>Google</a> :)";
    $scope.plaintext = "This is a link: https://www.google.com :) "
});

Usage in your HTML template:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
         <h1>Before</h1>
        <p ng-bind-html="html"></p>
        <p ng-bind-html="plaintext"></p>
         <h1>After</h1>
        <p ng-bind-html="html | hrefToJS"></p>
        <p ng-bind-html="plaintext | linky | hrefToJS"></p>
    </div>
</div>

Upvotes: 1

Related Questions