0

I have Problem when trying to make Bootstrap Modals to show PDF Document using <embed src="./pdfFiles.pdf"></embed> Tag. I am using Bootstrap Version 4.5

When user click the button to trigger the modals, Bootstrap modals normally displays PDF document. But, The problem appear when user close the modals and show it again. instead of displaying PDF Document, modals displays blank document.

Blank Document on Bootstrap Modals after close and re show

EDITED My Code Shown below. Bootstrap CDN

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<title>PDF Show</title>

Show the modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">PDF Modal</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <embed src="http://localhost/pdfFile.pdf"></embed>
            <embed src="http://192.168.0.13/pdfFile.pdf"></embed>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>  
        </div>
    </div>
</div>

I already contained the issue, The PDF Failed to display only when I use the IP address (or base_url() in Codeigniter) to fill pdf link in src="http://192.168.0.1/pdfFile.pdf" No problem appear when I use http://localhost/pdfFile.pdf 

<embed src="http://localhost/pdfFile.pdf"></embed>
<embed src="http://192.168.0.1/pdfFile.pdf"></embed>
Angga Febrian Sahid
  • 21
  • 3
  • Please provide the code, where and how you show and close the modal. – ferikeem Jun 04 '21 at 09:13
  • Thank you for your advice, i already put my code above, i am using bootstrap modal to show and close the modal – Angga Febrian Sahid Jun 06 '21 at 23:58
  • Then your issue might be [this](https://stackoverflow.com/questions/9280665/insecure-content-in-iframe-on-secure-page). You can't include a non-secure url in your html, when using https. AFAIR localhost is an exception in most browsers. – ferikeem Jun 07 '21 at 08:28

0 Answers0