0
我首先是一名設計師，所以對我的編程技巧的掌握非常有限。 我想要做的是將一個外部頁面插入我的jquery移動網頁。爲了做到這一點，我使用外部鏈接，它在safari中運行良好。將外部頁面插入到Jquery Mobile
外部鏈接的問題是，當我將webapp保存到我的主屏幕時，除了外部鏈接外，所有內容都可以像原生應用程序一樣工作。當點擊這些時，它會帶我去Safari，後退按鈕不再工作。
所以我的問題是，我怎樣才能使這個外部頁面進入應用程序，而不會回到safari？我一直在論壇和谷歌環顧四周，並猜測我需要使用「pageinit」？但說實話，我真的不知道如何使用它。
如果有人願意幫助我，我會非常高興，現在一直在爲此工作。
這裏是我的代碼：
外部：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width, minimum-scale=1, maximum-scale=1" name="viewport">
<title>Test</title>
<style>
.smooth_zoom_preloader {
background-image: url(zoom_assets/preloader.gif);
}
.smooth_zoom_icons {
background-image: url(zoom_assets/icons.png);
}
#zoom_container .landmarks{
position:absolute;
z-index:10;
top:0px;
left:0px;
font-family: Helvetica, Arial, Verdana;
font-size:12px;
color: #ffffff;
}
#zoom_container .landmarks .item {
position:absolute;
text-align:center;
display: none;
}
#zoom_container .landmarks .lable div {
width: 100px;
padding: 4px;
}
#zoom_container .landmarks .mark .text{
background-color:#000000;
padding:2px 6px;
}
</style>
<link href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="zoom_assets/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
<script>
jQuery(function($){
$('#yourImageID').smoothZoom({
width: 800,
height: 1200,
pan_BUTTONS_SHOW: "NO",
pan_LIMIT_BOUNDARY: "NO",
button_SIZE: 24,
button_ALIGN: "top right",
zoom_MAX: 200,
border_TRANSPARENCY: 0,
container: 'zoom_container',
/******************************************
Enable Responsive settings below if needed.
Max width and height values are optional.
******************************************/
responsive: true,
responsive_maintain_ratio: true,
max_WIDTH: '',
max_HEIGHT: ''
});
});
</script>
</head>
<body>
<div data-role="page" id="page6">
<div data-role="header" data-theme="b">
<h1>Test</h1><a href="#" data-rel="back">Tillbaka</a>
</div>
<div id="zoom_container">
<img id="yourImageID" src="images/Test1" width="3200" height="4800" />
<div class="landmarks" data-show-at-zoom="100" data-allow-drag="true">
<!-- This is a mark-type landmark -->
<div class="item mark" data-position="1600,1500" data-show-at-zoom="0">
<div>
<div class="text">
<strong>Test</strong>
</div>
<img src="images/mark.png" width="30px" height="30px" alt="Permanent Mark" />
</div>
</div>
</div>
</div>
</body>
</html>
jQuery主頁：
<div data-role="page" id="page5">
<div data-role="header" data-theme="b">
<h1>To test</h1><a href="#" data-rel="back">Back</a>
</div><div data-role="content"><P><center>
Search
</center></P>
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search...">
<li><a href="Test1.html" rel="external">Test</a></li>
我認爲這是同一個問題：http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-在新窗口 – 2013-03-01 15:33:28