简体   繁体   中英

JavaScript not working in Mobile Safari

Ok, so the problem is that JS code that I am using will not work in mobile Safari straight away. Everything works fine in desktop safari, chrome, etc.

In mobile safari (iphone 4 and ipod touch 2nd gen tested) the page is completely blank. BUT if you navigate to another page and then click back, it loads fine!

Could someone tell me what on earth is happening here?

Thanks:)

Here is a link to the site

http://osmithcouk.ipage.com/exposed/index.php

and here is JS code

NOTE I HAVE EDITED THE CODE SINCE RYUUTATSUO RECOMMENDED THAT I DO SO but still not working:(

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });

});

And here is the HTML that goes alongside that.

<a href="#" class="show_hide"><b><?php include 'headline1.txt'; ?></b></a>
<div class="slidingDiv">
<?php include 'story1.txt'; ?> <a href="#" class="show_hide">Hide story...</a></div>

And the CSS for slidingDiv and show_hide.

.slidingDiv {
    background-color: #FFFFFF;
    padding:20px;
    margin-top:10px;
}

.show_hide {
    display:none;
}

Thank you very much for all your help:)

Actually, the problem is that you have to add query string parameters in order to get it rendered on mobile. For example

script src="js/Common.js" type="text/javascript"

Should be replaced by

script src="js/Common.js?v=1.1" type="text/javascript"

and you can also supply version in comments of your js file so that client can come to know that he has latest version of JS files.

use

jQuery(window).load()

instead of

jQuery(document).ready()

I don't really know if this is the proper protocol but I have fixed it myself so thought I would post my answer!

It really is simple, I just moved the JS to below the.CSS. Apparently Safari has a problem rendering jQuery before CSS:s

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM