在仪表板内容上加载外部URL

时间:2016-10-09 07:30:04

标签: angularjs

我想在信息中心内容中加载网址(外部网址' http://google.com'),我尝试使用此代码

 .state('app.urlloading', {
    url: '/url-loading',
    controller:function($window){

      $window.location.href = 'https://google.com';

    },
    templateUrl: 'views/tmpl/url-loading.html'
  })

1)是否可以在仪表板内容中加载外部URL?如果我单击仪表板侧栏上的按钮,则只有仪表板内容应显示URL保留侧栏和标题,现在整个仪表板在单击按钮后消失重定向到谷歌页面。

2 个答案:

答案 0 :(得分:1)

使用iframe

怎么样?

<强> URL-loading.html

<iframe src="https://google.com"></iframe>

如果您需要使用相同的template & controller打开不同的网址,则可以使用resolver

 // loading google
.state('app.urlloading', {
    url: '/url-loading-google',
    controller:'UrlLoadingCtrl'
    resolve {
        url : function(){
            return "https://www.google.com"
        }
    }
    templateUrl: 'views/tmpl/url-loading.html'
  })

 // loading twitter
.state('app.urlloading', {
    url: '/url-loading-twitter',
    controller:'UrlLoadingCtrl'
    resolve {
        url : function(){
            return "https://www.twitter.com"
        }
    }
    templateUrl: 'views/tmpl/url-loading.html'
  })

<强>控制器

.controller('UrlLoadingCtrl', [ 'url', '$scope', function(url, $scope){
    $scope.url = url;
})

<强> URL-loading.html

<iframe src="{{url}}"></iframe>

答案 1 :(得分:0)

如果更改location.href,则整页更改。静态HTML可用于静态HTML链接无关紧要的状态是外部的还是非外部的。

<div class="wrapper">
<div class="h_iframe">
    <!-- a transparent image is preferable -->
    <img class="ratio" src="http://placehold.it/16x9"/>
    <iframe src="http://www.youtube.com/embed/WsFWhL4Y84Y" frameborder="0" allowfullscreen></iframe>
</div>
<p>Please scale the "result" window to notice the effect.</p>

但你可以使用这样的iframe,这正是你想要的。