javascript - iframe issue with mobile - Stack Overflow

admin管理员组

文章数量:1296288

Scenario

I have a website which is working very well in desktop browser but getting issue with mobile. I am loading pdf file in iframe and displaying in modal popup. But don't know what is happening when Opening website page in mobile so first of all my pdf file get open in my mobile. If anyone have any idea about it than please guide me.

My Html Code

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

Scenario

I have a website which is working very well in desktop browser but getting issue with mobile. I am loading pdf file in iframe and displaying in modal popup. But don't know what is happening when Opening website page in mobile so first of all my pdf file get open in my mobile. If anyone have any idea about it than please guide me.

My Html Code

<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-mvc
• pdf
• iframe

Share Improve this question Follow edited Sep 23, 2016 at 10:46 Govinda Rajbhar asked Sep 23, 2016 at 10:24 Govinda RajbharGovinda Rajbhar 3,03466 gold badges4040 silver badges6464 bronze badges 1

• Why minus marking please let me know? – Govinda Rajbhar Commented Sep 23, 2016 at 10:34

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Finally found solution. After of 1 hour R&D

iframe src attribute was the reason for this issue because when page load at the same time iframe src going to download the pdf file so at the same time it was displaying pdf file on page load inside of mobile. so I just remove the src tag from the iframe tag and bind it using jquery code.

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

And it is working fine.

What I have done is I uploaded the pdf in Google Drive and changed the permission of pdf file to Editor. You just have to edit the GDrive sharing link. Change the 'view' attribute to 'preview'. Now it's working for every device like a charm for me. Hola!

I have used <embed not <iframe:

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

Before:

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

Changed:

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

本文标签： javascriptiframe issue with mobileStack Overflow