iframe / jquery .toggle fails to hide .pdf in Safa

Question

I have an iFrame with a pdf src. When I click a button it is shown. When I click a button it is hidden.

It is coded as a function using jquery .toggle (simplified):

<script>
function showpdf() {
$('.showpdf').toggle();
}
</script>  

<div class="showpdf" style="display:none">
<iframe class="showpdf" src="file.pdf" style="display:none;">
</iframe> 
</div>

<div class="showpdf" style="display:none">Hide PDF</div>
<div class="showpdf" style="display:block">Show PDF</div>

This works fine in IE, Chrome, FF... But in Safari, the pdf does not hide.

JSFiddle: http://jsfiddle.net/hT97Z/

PS: can anyone explain why it does not work at all with onLoad, onDomReady?

Answer 1

Here is the solution:

• preload the .pdf in a hidden iframe
• toggle iframe and visibility as before
• add the src to the original iframe using jquery

JS-Fiddle: http://jsfiddle.net/hT97Z/3/

In this way the loading of the .pdf is isolated from the toggle function all together.

---

The code added to the function:

function showpdf() { $('.showpdf').toggle(); $('#theframe').attr('src','the.pdf'); }

The html added:

<iframe style="display:none;" src="the.pdf"></iframe>