iframe问题与移动

时间:2016-09-23 10:24:53

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

方案

我的网站在桌面浏览器中运行良好,但却遇到了手机问题。我在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;
}

2 个答案:

答案 0 :(得分:0)

终于找到了解决方案。在1小时后R&amp; D

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;
}

它工作正常。

答案 1 :(得分:0)

我要做的是将pdf上传到Google云端硬盘中,并将pdf文件的权限更改为Editor。您只需要编辑GDrive共享链接。将'view'属性更改为'preview'。现在,它适用于所有设备,对我来说就像一种魅力。哇!

我用过<embed而不是<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