【问题标题】:iframe issue with mobileiframe 手机问题
【发布时间】:2017-02-01 04:15:59
【问题描述】:

场景

我有一个网站在桌面浏览器中运行良好,但在移动设备上出现问题。我在 iframe 中加载 pdf 文件并在模式弹出窗口中显示。但是不知道在手机中打开网站页面时会发生什么,所以首先我的 pdf 文件在我的手机中打开。如果有人对此有任何想法,请指导我。

我的 HTML 代码

<a href="" onclick="OpenTermsOfUsePopup(); return false;">Terms of Use</a>

<div id="divTermsOfUse" class="modal fade">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">H2eFile Terms of use</h4>
                </div>
                <div class="modal-body">
                    <iframe id="iframeTou" src="~/Privacy_Policy/H2eEile%20-Terms-of-Use.pdf#page=1&zoom=100" style="width: 100%; height: 500px;">
                        <p>It appears your web browser doesn't support iframes.</p>
                    </iframe>
                </div>
            </div>
        </div>
    </div>

JS

function OpenTermsOfUsePopup() {               
     $('#divTermsOfUse').modal("show");
     return false;
}

【问题讨论】:

  • 为什么要减号请告诉我?

标签: javascript jquery asp.net-mvc pdf iframe


【解决方案1】:

终于找到了解决办法。经过1小时的研发

iframe src 属性是导致此问题的原因,因为当页面加载同时 iframe src 将下载 pdf 文件时,它同时在移动设备内部的页面加载时显示 pdf 文件。所以我只是从 iframe 标签中删除 src 标签并使用 jquery 代码绑定它。

HTML

<iframe id="iframeTou" style="width: 100%; height: 500px;">
     <p>It appears your web browser doesn't support iframes.</p>
</iframe>

JQuery

function OpenTermsOfUsePopup() {
    $('#iframeTou').attr('src', 'Privacy_Policy/H2eEile%20-Terms-of-Use.pdf#page=1&zoom=100');
    $('#divTermsOfUse').modal("show");
    return false;
}

而且运行良好。

【讨论】:

    【解决方案2】:

    我所做的是将 pdf 上传到 Google Drive 并将 pdf 文件的权限更改为 Editor。您只需编辑 GDrive 共享链接。将'view' 属性更改为'preview'。现在它适用于每一种设备,就像我的魅力一样。喂!

    我使用的是&lt;embed 而不是&lt;iframe

    <embed src="https://drive.google.com/file/d/0B1wr_E_mSp2Ec3RhcnRlcl9maWxl/preview?usp=sharing" frameborder="0" width="100%" height="1000px"
    

    之前:

    https://drive.google.com/file/d/0B1wr_E_mSp2Ec3RhcnRlcl9maWxl/view?usp=sharing
    

    改变:

    https://drive.google.com/file/d/0B1wr_E_mSp2Ec3RhcnRlcl9maWxl/preview?usp=sharing
    

    【讨论】:

      猜你喜欢
      • 2018-02-25
      • 2011-12-29
      • 1970-01-01
      • 1970-01-01
      • 2017-10-28
      • 2019-04-24
      • 2013-04-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多