Question

更新：问题是由于在浏览器中加载了错误的页面引起的。现在解决了。

在图片中，您可以看到我正在使用Jonathan Stark撰写的O'Reilly书籍开发的iPhone网页的首页。该图显示了iphone.html（见下文），它只是一堆链接，点击时会使用jquery.js中的ajax加载index.html（见下文）中的内容（见下文）。该网站的实时版本可在www.quoraquora.com上找到。

在jquery文件的最底部，有一个函数可以删除h2的内容并将其放在h1中。操作代码是这样的。

var title = $('h2').html() || 'Hello!';
    $('h1').html(title);
    $('h2').remove();
    $('#progress').remove();
    }

因此，如果您单击“关于”链接，则“关于”将出现在工具栏中。在第一页上，它应该显示“hello”，因为没有任何链接会被点击。

但是，正如你在我的图片中看到的，没有“h1”说“你好”，当我点击链接时，标题中没有“h1”显示“关于”等。

你能告诉我为什么吗？

iphone with no headers

HTML

iphone.html

<html>
    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <!-- <link rel="apple-touch-icon" href="myCustomIcon.png" /> -->
        <link rel="apple-touch-icon-precomposed" href="myCustomIcon.png" />
        <link rel="apple-touch-startup-image" href="myCustomStartupGraphic.png" />
        <link rel="stylesheet" href="iphone.css" type="text/css" media="screen" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="iphone.js"></script>
    </head>
    <body>
        <div id="header">
            <h1>Jonathan Stark</h1>
        </div>
        <div id="container"></div>
    </body>
</html>

的index.html

<html>
    <head>
        <title>Jonathan Stark</title>
        <meta name="viewport" content="user-scalable=no, width=device-width" />
        <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" />
        <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" />
        <!--[if IE]> 
        <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> 
        <![endif]-->
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="iphone.js"></script>
    </head>
    <body>
        <div id="container">
            <div id="header">
                <h1><a href="./">Jonathan Stark</a></h1>
                <div id="utility">
                    <ul>
                        <li><a href="about.html">About</a></li>
                        <li><a href="blog.html">Blog</a></li>
                    </ul>
                </div>
                <div id="nav">
                    <ul>
                        <li><a href="consulting-clinic.html">Consulting Clinic</a></li>
                        <li><a href="on-call.html">On Call</a></li>
                        <li><a href="development.html">Development</a></li>
                    </ul>
                </div>
            </div>
            <div id="content">
                <h2>About</h2>
                <p>Jonathan Stark is a web developer, speaker, and author. His consulting firm, Jonathan Stark Consulting, Inc., has attracted clients such as Staples, Turner Broadcasting, and the PGA Tour. ...</p>
            </div>
            <div id="sidebar">
                <img alt="Manga Portrait of Jonathan Stark" src="images/manga.png"/>
                <p>Jonathan Stark is a mobile and web application developer who the Wall Street Journal has called an expert on publishing desktop data to the web.</p>
            </div>
            <div id="footer">
                <ul>
                    <li><a href="services.html">Services</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="blog.html">Blog</a></li>
                </ul>
                <p class="subtle">Jonathan Stark Consulting, Inc.</p>
            </div>
        </div>
    </body>
</html>

CSS

body {
    background-color: #ddd;
    color: #222;
    font-family: Helvetica;
    font-size: 14px;
    margin: 0;
    padding: 0;
}
#header {
    background-color: #ccc;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
    border-color: #666;
    border-style: solid;
    border-width: 0 0 1px 0;
}
#header h1 {
    color: #222;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto;
    padding: 10px 0;
    text-align: center;
    text-shadow: 0px 1px 0px #fff;
    max-width: 160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
ul {
    list-style: none;
    margin: 10px;
    padding: 0;
}
ul li a {
    background-color: #FFFFFF;
    border: 1px solid #999999;
    color: #222222;
    display: block;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: -1px;
    padding: 12px 10px;
    text-decoration: none;
}
ul li:first-child a {
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
}
ul li:last-child a {
    -webkit-border-bottom-left-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
}
ul li a:active,ul li a:hover {
    background-color: blue;
    color: white;
}
#content {
    padding: 10px;
    text-shadow: 0px 1px 0px #fff;
}
#content a {
    color: blue;
}
#progress {
    -webkit-border-radius: 10px;
    background-color: rgba(0,0,0,.7);
    color: white;
    font-size: 18px;
    font-weight: bold;
    height: 80px;
    left: 60px;
    line-height: 80px;
    margin: 0 auto;
    position: absolute;
    text-align: center;
    top: 120px;
    width: 200px;
}
#header div.leftButton {
    font-weight: bold;
    text-align: center;
    line-height: 28px;
    color: white;
    text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
    position: absolute;
    top: 7px;
    left: 6px;
    max-width: 50px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-width: 0 8px 0 14px;
    -webkit-border-image: url(images/back_button.png) 0 8 0 14;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#header div.leftButton.clicked {
    -webkit-border-image: url(images/back_button_clicked.png) 0 8 0 14;
}

JQuery

if (window.innerWidth && window.innerWidth <= 480) {
    $(document).ready(function(){ 
        $('#header ul').addClass('hide'); 
        $('#header').append('<div class="leftButton" onclick="toggleMenu()">Menu</div>');
    }); 
    function toggleMenu() {
        $('#header ul').toggleClass('hide'); 
        $('#header .leftButton').toggleClass('pressed');
    }
}

$(document).ready(function(){
loadPage();
});
function loadPage(url) {
$('body').append('<div id="progress">Loading...</div>');
scrollTo(0,0);
if (url == undefined) {
$('#container').load('index.html #header ul', hijackLinks);
} else {
$('#container').load(url + ' #content', hijackLinks);
}
}
function hijackLinks() {
$('#container a').click(function(e){
var url = e.target.href;
if (url.match(/quoraquora.com/)) {
e.preventDefault();
loadPage(e.target.href);
}
});
var title = $('h2').html() || 'Hello!';
$('h1').html(title);
$('h2').remove();
$('#progress').remove();
}

RE：这是我如何使用setTimeout从$（document）就绪，直到它删除h2？

function hijackLinks() {
    $('#container a').click(function(e){
    var url = e.target.href;
    if (url.match(/quoraquora.com/)) {
    e.preventDefault();
    loadPage(e.target.href);
    }
    });
    var title = $('h2').html() || 'Hello!';
   $(document).ready
   (
    function() 
       { 
         setTimeout
           (
             function() 
              { 
               $('h1').html(title);
              },
              5000
           );
        }
    );

    $('h2').remove();
    $('#progress').remove();
    }

Answer 1

尝试使用此类代码：

function hijackLinks() {
    $('#container a').click(function(e) {
        var url = e.target.href;
        if (url.match(/quoraquora.com/)) {
            e.preventDefault();
            loadPage(e.target.href);
        }
    });

    window.setTimeout(function() {
        alert("delayed function started");
        var title = $('h2').html() || 'Hello!';
        alert("title: " + title);
        alert("H1 count: " + $('h1').length);
        $('h1').html(title);
        $('h2').remove();
        $('#progress').remove();
    }, 500);
}

背后的原因：也许jQuery没有机会处理容器的新DOM，所以给它一些时间。

编辑：添加警报以调试问题。

h1没有显示在iPhone网络应用程序中

1 个答案: