ionic-content 中iframe高度自适应

weixin_33885253

于 2018-03-20 11:05:00 发布

阅读量326

点赞数

本文介绍了如何解决网页中iframe加载外部URL及调整其高度至全屏的问题。具体包括使用AngularJS安全地设置iframe源及确保内容完全显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http://blog.youkuaiyun.com/jesounao/article/details/50945003
无法访问外部url的问题–两个步骤解决：
1.iframe的src属性用ng-src属性替代，并指明绑定对象：ng-src="{{targetUrl}}"

2.在controller里，调用$sce: $scope.targetUrl = $sce.trustAsResourceUrl(url)

高度无法最大化的问题–两个步骤：
1.ion-content 属性里添加 scroll="true" overflow-scroll="true"

2.iframe的style里添加 min-height: 100%

<ion-modal-view>
    <ion-header-bar>
        <h1 class="title">无法登录</h1>
        <div class="buttons">
            <button class="button" ng-click="closeModal()">取消</button>
        </div>
    </ion-header-bar>
    <ion-content scroll="true" overflow-scroll="true">
        <iframe src="http://www.zehuiwenhua.com/guoxue/content.html?k=guoxue-content-cannot-login" frameborder="0" style="width:100%;height:100%;"></iframe>
    </ion-content>
</ion-modal-view>