小贝子编程

jqueryMobile对话框在Safari页面加载打开后立即关闭



所以我的jqueryMobile对话框一旦在Safari中打开页面加载就会关闭。我有一个点击事件附加到一个链接，打开它。在所有其他浏览器上都可以正常工作，只是Safari不行。也不是，我有一个饼干集，所以它只打开一次。这里有一个链接可以查看。jqueryMobile对话框问题任何帮助将非常感激。

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

首先，我下载了你的网页源代码，并在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。我之所以提到这一点，是因为openDialog函数必须在pageshow事件期间执行(当您看到最终代码时，一切都会清楚)。

第三个问题如果在另一个HTML文件中分开，jQuery Mobile对话框将不能很好地工作。这就是为什么我把它放在一个原始HTML文件中。没有这个问题，我们就不需要解决问题1。第二题。因为我们现在有一个对话框在同一个页面的其余HTML，原始内容必须包装在一个jQM页面，我们需要pageshow事件来触发这个新的对话框。

第四个问题

这是一个很好的做法，但一定要杀死interval或timer，除非你想让它一遍又一遍地做所有的事情。

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>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium