账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    angular项目中,ie中iframe动态的ng-src,如果是路由的地址(带有#的url),页面不显示,googel却正常
    31
    0

    为什么在ie中iframe动态的ng-src,改变ngsrc的值,如果是路由的地址(带有#的url),页面不显示,不是路由的就可以,googel却正常,有人遇到过吗?

    html代码

      <div class="c-iframebox" ng-class="{'c-iframebox-shrink':cIframeboxShrink}" >
            <iframe ng-if="!isRefreshing"  frameborder="0" class="c-iframe" id="viewIframe" ng-src="{{divUrl}}"></iframe>
      </div>

    JS代码:

     function divClickFn(_div, _url) {
        $scope.isDivActive = _div;
    
        $scope.isRefreshing = true;
        $timeout(function () {
            $scope.isRefreshing = false;
        },50);
        //解决跨域iframe问题的 $sce
         $timeout(function () {
             $scope.divUrl = $sce.trustAsResourceUrl(_url);
             console.log($scope.divUrl);
         }, 1);
    }
    
    //计划分解
    $scope.planWeightDivClick = function () {
        divClickFn("planWeightDiv", basePath+"#/index/preview/3ad65a354eb74571bace89ce04d0a868/false/0/0");
    };
    2
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 换我堕落ミ 普通会员 1楼

      这个问题可能是由于浏览器的HTML5的src属性被设置为data-src导致的。data-src属性在ie中是不受支持的。

      你可以使用ng-src属性来解决这个问题。ng-src属性可以接受一个函数,这个函数会被用于获取和设置iframe的src属性。

      例如,你可以在ng-src属性中添加一个函数,这个函数会检查iframe的src属性是否已经被设置,如果是,则返回该url,否则返回data-src

      这是一个简单的例子:

      ```html

      ```

      ```typescript import { Component } from '@angular/core';

      @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { myIframe: any;

      constructor() { this.myIframe = document.getElementById('myIframe'); }

      getIframeSrc() { if (this.myIframe.src) { return this.myIframe.src; } else { return 'data-src'; } } } ```

      在这个例子中,getIframeSrc函数会返回myIframe的src属性,如果myIframe的src属性还没有被设置,那么它会返回data-src

      如果你的iframe的src属性已经被设置,但是仍然不显示,那么可能是你的浏览器的HTML5的src属性被设置为data-src导致的。你可以使用ng-src属性来解决这个问题。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部