0

Im first of all a designer, so be ware of my programming skills are very limited. What I trying to do is insert a external page into my jquery mobile webpage. To do this Im using external links and it works well in safari.

The problem with the external links is that when I save the webapp to my homescreen, everything works like it would be a native app, except for the external links. When these are clicked it takes me to safari and the back button does no longer work.

So my question is, how can i make this external pages into the app, without going back to safari? Ive been looking around in the forum and google and guess I need to use "pageinit"? But honestly I cant really figure out how to use it.

If someone would help me with this I would be very happy, have been working with this for days now.

Here is my code:

External: 

<!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>

Main Jquery page:

<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

以前のコードで申し訳ありませんが、外部ページをリンクするための簡単なコードを次に示します。

<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 に答える
0

私はついにそれを機能させました

function navigator_Go(url) { window.location.assign(url);

リンクについて: テストは問題なく動作しますが、すべてのリンクを作り直す必要があります。ナビゲーターで行く。

ここで解決策を見つけました：

iPhone/iPad Web アプリを全画面表示モードに保つにはどうすればよいですか?

于 2013-03-06T15:27:55.140 に答える