iframe issue with mobile

Question

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

Answer 1

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.