0

我首先是一名设计师，所以要注意我的编程能力非常有限。我想做的是在我的 jquery 移动网页中插入一个外部页面。为此，我使用外部链接，它在 safari 中运行良好。

外部链接的问题是，当我将 web 应用程序保存到我的主屏幕时，除了外部链接之外，一切都像本机应用程序一样工作。单击这些后，我将进入 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>
4

2 回答 2

0

我终于让它工作了，我用过

功能 navigator_Go(url) { window.location.assign(url);

在链接上：测试工作正常，但您必须重新处理所有链接。跟着导航器走。

我在这里找到了解决方案：

如何让 iPhone/iPad 网络应用程序保持全屏模式？

于 2013-03-06T15:27:55.140 回答
0

抱歉之前的代码是链接外部页面的简单代码

<a href="External.html" data-rel="external" id="#external">External page</a>
 <body>
<div id="indexPage" data-role="page">
    <script type="text/javascript">
        $("#external").live('pageinit', function() {
            // do something here...
        });
    </script>
  </div>

检查这条线让我知道它是否工作

于 2013-03-01T15:35:42.480 回答