只有在Safari中的页面加载时打开jqueryMobile对话框才会立即关闭

时间：2013-05-07 19:12:36

标签： jquery jquery-mobile webkit setinterval jquery-mobile-dialog

所以我的jqueryMobile对话框只在Safari中的页面加载时打开就会关闭。我有一个点击事件附加到打开它的链接。在所有其他浏览器上工作正常，而不是Safari。我也没有设置cookie，所以它只打开一次。这是一个检查它的链接。 jqueryMobile dialog issue我们将非常感谢您的帮助。

    <a id='dialog' href="dialog.html" data-rel="dialog" >Dialog</a>

    <script>
    function openDialog() {
       setTimeout(function () {
       $.mobile.changePage('dialog.html');
      }, 100); // delay above zero
     }


    $(function() {
        if ($.cookie('dialog_shown') == null) {
           $.cookie('dialog_shown', 'yes', { expires: 7, path: '/' });
        openDialog();   
       } 
        });

1 个答案:

答案 0 :(得分：2)

首先，我已经下载了您的网页源代码并在Safari和Chrome上进行了测试。这纯粹是一个Web-kit浏览器问题。

不要将此视为批评，但代码中存在许多问题，我不知道从哪里开始。

第一个问题

首先，jQuery Mobile对其设计严格，所有页面都必须包含在：

中 
<div data-role="page" id="index">

选择您想要的任何网页ID。如果你想让jQuery Mobile表现出来，那就必须完成。

第二个问题

jQuery Mobile不喜欢文档准备好，而很多东西都可以使用它们，它们将无法正常工作。 jQuery Mobile开发人员已经创建了页面事件来解决这个问题。如果您想了解更多内容，请阅读我的其他文章： jQuery Mobile: document ready vs page events 。我之所以提到这一点，是因为必须在pageshow事件期间执行openDialog函数（当你看到最终代码时，一切都会清晰）。

第三个问题

如果在另一个HTML文件中分隔，jQuery Mobile对话框不能正常工作。这就是我将它放在原始HTML文件中的原因。没有这个问题，我们不需要修复问题1和问题2.因为我们现在在与HTML的其余部分相同的页面上有一个对话框，原始内容必须包含在jQM页面内，我们需要pageshow事件来触发这个新对话。

第四个问题

这只是一个很好的做法，但总是要杀掉间隔或计时器，除非你想要它一遍又一遍地做所有事情。

function openDialog() {
    var interval = setInterval(function(){
       $.mobile.changePage('#dialog');
       clearInterval(interval);
    },1);
}

最终代码

我只删除了cookie处理，因为它阻止我测试它。您可以下载此代码并在本地进行测试。 

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="We help over 3000 homeless animals every year find permanent homes. We offer Pet Adoption, Grooming, Dog Training, Spay &amp; Neuter, Vaccinations, Micro-chipping and Educational Programs for children.">
<meta name="keywords" content="">
<title>Adopt, Donate, Volunteer - Humane Society Silicon Valley</title>
<link href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/default.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/css/hpStyles.css">
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/_fancybox/jquery.fancybox.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/respond.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
    $(function() {
        $( "#navIcon" ).click(function() {
        $( "footer" ).toggleClass( "newClass", 1500, "easeInOutBack" );
    return false;
    });
});
</script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/_fancybox/jquery.fancybox.pack.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/jquery.cookie.js"></script>
<script src="https://dl.dropboxusercontent.com/u/8859129/HSSV-2013/HSSV-2013/js/search.js"></script>
<script>
function openDialog() {
    var interval = setInterval(function(){
           $.mobile.changePage('#dialog');
           //clearInterval(interval);
    },1);  
 }


$(document).on('pageshow', '#index', function(){   
    openDialog();   
});     
</script>
<script>
        $(document).ready(function() {
        $(".fancybox").fancybox();
        console.log($.cookie("test", 1));
            });
</script>
<script type="text/javascript">
function openFancybox() {
    setTimeout( function() {$('.fancybox').trigger('click'); },0);
}
$(document).ready(function() {
    var visited = $.cookie('test');
    if (visited == 'yes') {
        return false;
    } else {
       // openFancybox();
    }
    $.cookie('test', 'yes', { expires: 7 });
    $('.fancybox').fancybox();
});
</script>
</head>
<body>

<div data-role="dialog">

        <div data-role="header" data-theme="d">
            <h1>Custom Dialog</h1>
        </div>

        <div data-role="content">
            <h1>Customize the HTML. Have any content you want in here.</h1>
            <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
            <a href="#index" data-role="button" data-theme="b">Button Style</a>       
            <a href="#index" data-role="button" data-theme="c">Cancel</a>    
        </div>
    </div>

    <div data-role="page" id="index">

    <a id="various1" class="fancybox" href="_images/topNavSprite.png">Click</a>
    <a id='dialog' href="#dialog" data-rel="dialog" >Dialog</a>


    <div class="gridContainer clearfix">
  <div id="LayoutDiv1">
    <nav> <a href="#"><img class="logo" src="_images/hssv-logo.jpg" height="87" width="88" alt="Humane Society Silicon Valley" /></a>
      <ul>
        <li><a class="adopt" href="#">Adopt</a></li>
        <li><a class="involved" href="#">Get Involved</a></li>
        <li><a class="services" href="#">Pet Services</a></li>
        <li><a class="contact" href="#">Contact us</a></li>
        <li><a class="about" href="#">About</a></li>
        <li><a class="donate" href="#">Donate</a></li>
      </ul>
    </nav>
  </div>
  <div id="LayoutDiv2">
    <div id="hpNav">
      <ul>
        <li><a class="adoptHp" href="#">Adopt</a></li>
        <li><a class="donateHp" href="#">Donate</a></li>
        <li><a class="involvedHp" href="#">Get Involved</a></li>
        <li><a class="medicalHp" href="#">Medical Center</a></li>
        <li><a class="kidsHp" href="#">Kids Programs</a></li>
        <li><a class="newsHp" href="#">News</a>
        <!-- start feedwind code -->
        <script type="text/javascript">
        <!--
        rssmikle_url="http://hssvacc.blogspot.com/feeds/posts/default?alt=rss";
        rssmikle_frame_width="249";
        rssmikle_frame_height="250";
        rssmikle_target="_blank";
        rssmikle_font="";
        rssmikle_font_size="12";
        rssmikle_border="on";
        rssmikle_css_url="";
        rssmikle_title="off";
        rssmikle_title_bgcolor="#0066FF";
        rssmikle_title_color="#FFFFFF";
        rssmikle_title_bgimage="http://";
        rssmikle_item_bgcolor="#FFFFFF";
        rssmikle_item_bgimage="http://";
        rssmikle_item_title_length="100";
        rssmikle_item_title_color="#666666";
        rssmikle_item_border_bottom="on";
        rssmikle_item_description="on";
        rssmikle_item_description_length="100";
        rssmikle_item_description_color="#666666";
        rssmikle_item_date="on";
        rssmikle_item_description_tag="off";
        rssmikle_item_podcast="icon";
        //-->
        </script>
        <script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
        <div style="font-size:10px; text-align:right; display:none;">
        <a href="http://feed.mikle.com/en/" target="_blank" style="color:transparent;">FeedWind</a>
        <!--Please display the above link in your web page according to Terms of Service.-->
        </div>
        <!-- end feedwind code -->
        </li>
      </ul>
    </div>
    </div>
  </div>
  <div id="LayoutDiv3"> </div>
</div>
<footer class="newClass">
  <div id="navIcon"></div>
  <div id="search"> 
    <!-- Place this tag where you want the search box to render -->
    <gcse:searchbox-only></gcse:searchbox-only>
  </div>
  <div id="subNav">
    <ul>
      <li><a href="#">Adoption</a></li>
      <li><a href="#">Available animals</a></li>
      <li><a href="#">How to adopt</a></li>
      <li><a href="#">Contact adoptions</a></li>
      <li><a href="#">Community Adoption Centers</a></li>
    </ul>
    <ul>
      <li><a href="#">Volunteer</a></li>
      <li><a href="#">Become a volunteer</a></li>
      <li><a href="#">Become a foster parent</a></li>
      <li><a href="#">Learn about corporate volunteering</a></li>
    </ul>
    <ul>
      <li><a href="#">Donate</a></li>
      <li><a href="#">Donate Now</a></li>
      <li><a href="#">Become a monthly donor</a></li>
      <li><a href="#">President’s Circle</a></li>
      <li><a href="#">Honor and memorial giving</a></li>
      <li><a href="#">Animals sponsorship</a></li>
      <li><a href="#">Wills and bequests</a></li>
      <li><a href="#">Corporate giving</a></li>
      <li><a href="#">Workplace giving</a></li>
      <li><a href="#">Pet Pantry</a></li>
      <li><a href="#">Wishlist</a></li>
    </ul>
    <ul>
      <li><a href="#">Medical Services</a></li>
      <li><a href="#">Spay and Neuter</a></li>
      <li><a href="#">Vaccinations, microchips, tests</a> </li>
      <li><a href="#">Euthanasia services</a></li>
      <li><a href="#">Preventing Unwanted Pregnancies  (P.U.P.)</a></li>
      <li><a href="#">Medical information for pet owners</a></li>
    </ul>
    <ul>
      <li><a href="#">Pet Care</a></li>
      <li><a href="#">Behavior and training help</a></li>
      <li><a href="#">Pet grooming</a></li>
      <li><a href="#">Pet store</a></li>
      <li><a href="#">Dog park</a></li>
    </ul>
    <br>
    <br>
    <br>
    <ul>
      <li><a href="#">Humane Education</a></li>
      <li><a href="#">Summer Camp</a></li>
      <li><a href="#">Kindergarten to 3rd grade</a></li>
      <li><a href="#">4th grade to 8th grade</a></li>
      <li><a href="#">9th grade to 12th grade</a></li>
      <li><a href="#">Parents and teachers</a></li>
    </ul>
    <ul>
      <li><a href="#">Other Services</a></li>
      <li><a href="#">Grief counseling</a></li>
      <li><a href="#">Homeless cat program</a></li>
      <li><a href="#">Lost and found pets</a></li>
      <li><a href="#">Pet guardianship</a></li>
      <li><a href="#">Pet surrender</a></li>
      <li><a href="#">Animal cruelty</a></li>
      <li><a href="#">Animal Licensing</a></li>
      <li><a href="#">Disaster preparedness for your pet</a></li>
      <li><a href="#">Rescue organizations</a></li>
      <li><a href="#">Other animal shelters</a></li>
      <li><a href="#">Wildlife services</a></li>
    </ul>
  </div>
</footer>
</div>
</body>
</html>
相关问题
最新问题