场景
我有一个网站,在桌面浏览器中运行良好,但在移动设备上出现问题。我正在 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">×</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;
}
终于找到解决办法了。经过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;
}
并且运行良好。
我所做的是将pdf上传到Google Drive并将pdf文件的权限更改为编辑器。您只需编辑 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
我发现 iFrame 无法在移动设备上正常工作,它只显示 PDF 的第一页并且没有缩小,PDF 是全尺寸,代码的响应方面失败...我尝试嵌入,再次文件仅显示第一页,与对象的情况一样。
这是一种解决方法,以便 PDF 文件可以在网站上正确显示吗?欢迎建议。