4:连接外部页面

在jQuery Mobile中，如果单击一个指向外部页面的超链接，jQuery Mobile将自动分析URL地址，自动产生一个AJAX请求。如果请求成功，jQuery Mobile将自动构建页面结构，注入主页面的内容，同时初始化全部的jQuery Mobile组件，将新添加的页面内容显示在浏览器中；如果请求失败，jQuery Mobile将弹出一个错误提示框，数秒后提示框自动消失，页面不会刷新。以AJAX请求的方式打开一个外部页面，注入主页面的内容也是以"page"为目标，其他的内容将不会被注入主页面中。

如下所示：

主页代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title></title>
    <link href="../src/jquery.mobile-1.4.3.min.css" rel="stylesheet"/>
    <script src="../src/jquery.min.js"></script>
    <script src="../src/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>主页</h1>
    </div>
    <div data-role="content">
        <p><a href="out.html">外部页面</a></p>
    </div>
    <div data-role="footer">
        <h1>页脚</h1>
    </div>
</div>
</body>
</html>

外部页面代码

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>这是一个外部页面</h1>
    </div>
    <div data-role="content">
        <p>
            以ＡＪＡＸ请求方式链接外部页面，不需要在外部页面中导入ｊＱｕｅｒｙ　Ｍｏｂｉｌｅ框架文件
        </p>
    </div>
    <div data-role="footer">
        <h4>页脚</h4>
    </div>
</div>
</body>
</html>

效果图：

如果不想使用AJAX请求方式打开一个外部页面，只需要在链接元素中将"rel"属性的值设置为"external",该页面将脱离整个jQuery Mobile的主页面环境，以独资打开的页面效果显示。

效果图：

不但样式没有了，编码也错乱了。

如果要恢复上面的效果，就需要在外部页面中再指定编码，引入jQuery Mobile文件。

猜你喜欢