Directive to watch for new links and open in _system


#1

Hi. I have iFrame embedded. The iFrame has let’s say a video from YouTube dynamically loaded. This means according to the video selected the iFrame shows a different URL (video embedded player).

There are those videos though that YouTube doesn’t allow to be embedded so it shows a message to watch them on YouTube.

Click the “watch on youtube” link that the iFramed player shows opens an inAppBrowser window without any navigation which breaks the app.

I need probably a directive with an observe or watch or something like that I imagine which would convert all “href” to window.open with _system target…

Can you help with the directive or the way you suggest it can be solved?

I tried this and even with replace and transclude set to false but no chance either way :frowning:

angular.module('app')
.directive('hrefTransform', function() {
  return {
    restrict: 'A',
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      var href = attrs['href'];

      attrs.$observe('href', function(val){
        href = val;
      });
      
      attrs.$observe('href', function(val){
        onclick = val;
      });
      
      element.bind('click', function (event) {
       
        window.open(href, '_system');

        event.preventDefault();
        event.stopPropagation();

      });
    }
  };
});


#2

This is another thing I tried out but even in this case it failed to open the links of the iFrame in the system browser… It keeps opening in inAppBrowser by default :frowning: I am hopelesss without your help to this… 3 weeks already being stuck to this :disappointed_relieved:

.directive('goToLink', ['$cordovaInAppBrowser', '$ionicPlatform', function ($cordovaInAppBrowser, $ionicPlatform) {
  return {
    restrict: 'AC',
    link: function (scope, element, attrs) {
      if (!attrs.href){
        return;
      }
      var externalRe = new RegExp("^(http|https)://");
        var url = attrs.href;

        if(externalRe.test(url)) {
          element.on('click',function(e){
            e.preventDefault();
            if(attrs.ngClick){
              scope.$eval(attrs.ngClick);
            }
            //window.open(encodeURI(url), '_system');
            $ionicPlatform.ready(function() {
            window.open(encodeURI(url), '_system');
            })
          });
        }
    }
  };
}])