【问题标题】:when I use iframe in ion-content, the ion-content scroll is not working当我在 ion-content 中使用 iframe 时,ion-content 滚动不起作用
【发布时间】:2015-03-26 07:28:34
【问题描述】:
<ion-view view-title="title">
  <ion-content scroll="true">
    <iframe src="{{link}}"></iframe>
  </ion-content>
</ion-view>

看看上面的代码。

正如标题所说,当我在 ion-content 中使用 iframe 时,滚动不起作用。

如何解决这个问题。

【问题讨论】:

    标签: javascript html css ionic-framework iframe


    【解决方案1】:

    使用溢出滚动来启用滚动

    <ion-view view-title="title">
        <ion-content overflow-scroll="true">
             <iframe src="{{link}}"></iframe>
        </ion-content>
    </ion-view>
    

    【讨论】:

      【解决方案2】:

      这是 ios 的一个错误。我已经解决了这个问题。参考以下

      Iframe scrolling iOS 8

      【讨论】:

        【解决方案3】:

        将以下css添加到iframe的父div中

        -webkit-overflow-scrolling: touch !important;
        overflow: scroll !important;
        

        示例:

        HTML

        <ion-content class="iframe-fix">
          <iframe [src]="pageUrl" frameborder="0"></iframe>
        </ion-content>
        

        SCSS

        .platform-ios{
            .iframe-fix{
              -webkit-overflow-scrolling: touch !important;
              overflow: scroll !important;
            }
        }
        

        【讨论】:

          【解决方案4】:
          <ion-view title="sample page">
           <ion-content>
           <iframe src="http://www.w3schools.com">
                 <p>Your browser does not support iframes.</p>
          </iframe>
          </ion-content>
          <ion-view>
          

          滚动选项默认为true,无需特别添加

          【讨论】:

          • 感谢您的回答。但问题不是浏览器不支持 iframe 引起的。可以显示加载的页面 iframe。
          • 标签只是在 iframe 中显示的示例 tex,它可以正常工作。我已经这样做了,所以我在这里发布。如果你在 ion-content 中使用 iframe,它可以工作。跨度>
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2018-08-09
          • 1970-01-01
          相关资源
          最近更新 更多