求高手给解决图标打开是外部链接的问题。

我是帮主 · 发表于：2016-08-19 10:28:43

本帖最后由我是帮主于 2016-8-19 10:31 编辑

我的初级界面是这样的。这下面的每个按钮打开都是一个外部链接，现在用的是OpenNewWin。但是打开太慢了，听论坛里的高手说最好用OpenFrame这个语法，但是楼主是个从web刚进来的小白。不是太懂啊。有没有高手给个思路，我把代码贴出来。如果解决了，再给50元支付宝红包。谢谢！！！

上面这个图片的代码是：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
html,body{height:100%;background-color: #eee;margin-top:14px;}
.h10 {height: 10px;}
/* 头部导航样式 */
.swiper-slide img {width: 100%;}
/* 两列样式 */
.row {display: -webkit-box;display: -webkit-flex;}
.col {-webkit-box-flex:1; -webkit-flex:1; flex:1;}
.section2 .col {background-color: #fff;}
.section2 .col{border-bottom: 1px solid #d2d2d2;border-right: 1px solid #d2d2d2;}
.section2 .col:last-child {border-bottom: 1px solid #d2d2d2;}
.section2 h4{margin:15px 5px 5px 10px;border-bottom:2px solid #2768BA;}
/* 条目总体样式 */
.item {display: table; height: 70px; width: 100%;}
.item .itemlogo , .item .itemshelf {display: table-cell; vertical-align: middle;}
.item .itemlogo {width: 25%;}
.item .itemlogo img {width: auto;}
/* 条目特例 */
.shelf2 .userlogo img {width: 90px;}
/* 悬浮样式 */
.itemhover {background-color: #eee !important;}
.headerhover {background-color: #36A8DC;}
.swipe { overflow: hidden; visibility: hidden; position: relative; background: #fff; padding-bottom: 1px;}
.swipe-wrap { overflow: hidden; position: relative; }
.swipe-wrap .swipe-box { float: left; width: 100%; position: relative; }
.swipe-wrap .swipe-box img {width: 100%;}
</style>
</head>
<body>
<!--
<div id='slider' class='swipe'>
<div class='swipe-wrap'>
<div class="swipe-box">
<img src="../image/firstcover01.png" alt="">
</div>
<div class="swipe-box">
<img src="../image/firstcover02.png" alt="">
</div>
<div class="swipe-box">
<img src="../image/firstcover03.png" alt="">
</div>
</div>
</div>
-->
<div class="header" id="topbar">
<div class="center menu">
<ul>
<li><a onClick="openNewWin('wangdai')">网贷</a></li>
<li><a onClick="openNewWin('kuaika')">快卡</a></li>
<li><a onClick="openNewWin('tie')">提额</a></li>
<li><a onClick="openNewWin('tool')">工具</a></li>
</ul>
</div>
</div>
<div class="section2"> <h4>实用工具</h4></div>
<div class="row section2" style="height:auto;">
<div class="col">
<div class="item shelf2" tapmode="itemhover" onClick="openNewWin('to1')">
<div class="itemlogo userlogo"><img src="../image/kk/20.png" alt=""></div>
</div>
</div>
<div class="col">
<div class="item shelf2" tapmode="itemhover" onClick="openNewWin('to2')">
<div class="itemlogo userlogo"><img src="../image/kk/21.png" alt=""></div>
</div>
</div>
<div class="col">
<div class="item shelf2" tapmode="itemhover" onClick="openNewWin('to3')">
<div class="itemlogo userlogo"><img src="../image/kk/22.png" alt=""></div>
</div>
</div>
<div class="col">
<div class="item shelf2" tapmode="itemhover" onClick="openNewWin('to4')">
<div class="itemlogo userlogo"><img src="../image/kk/23.png" alt=""></div>
</div>
</div>
</div>
<!-end->
</div>
<div class="h10"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/swipe.js"></script>
<script type="text/javascript">
function openNewWin (type) {
api.openWin ({
name: type,
url: './'+type+'.html',
rect:{
x:0,
y:0,
w:'auto',
h:'auto'
},
bounces: false,
delay:200
});
}
apiready = function () {
var slider = Swipe( $api.dom('#slider'), {
auto: 3000,
continuous: true,
});
// 暂时关闭下拉刷新
// 在ios 7.0.6下面又出现左右移动问题
// api.setRefreshHeaderInfo({
// visible: true,
// bgColor: 'rgba(0,0,0,0)',
// textColor: '#666',
// textDown: '下拉刷新',
// textUp: '释放刷新'
// }, function(ret, err){
// loadData();
// });
}
function loadData(){
api.refreshHeaderLoadDone();
}
</script>
</html>

复制代码

然后拿第一个举例说明，第一个调用的是to1.....那么对应的就是to1.html这个页面。这个to1.html页面的代码为：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>title</title>
<link rel="stylesheet" type="text/css" href="../css/api.css"/>
<style>
body{
}
</style>
</head>
<body>
<iframe src="http://www**.**/wap/" width="100%" height="1080"></iframe>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
apiready = function(){
};
</script>
</html>

复制代码

无邪

我是帮主发表于 2016-8-19 10:55
同步了，报错了。报的是 api is not defined at ....... 就是api.openFrame ({ 这一行报错了 ...

放在apiready = function(){}里

无邪

可以改造下to*.html页面，用openframe打开外部网站，不要用iframe框架引入。

munyi

function openNewWin (type) {
      api.openFrame({
         name: type,
         url: './'+type+'.html',
         rect:{
            x:0,
            y:0,
            w:'auto',
            h:'auto'
         },
         bounces: false,
         delay:200
      });
}

无邪

api.openFrame ({
         name: 'to1',
         url: 'http://www**.**/wap/',
         rect:{
            x:0,
            y: 0,
            w:'auto',
            h:'auto'
         },
         bounces: false,
         delay:200
      });

我是帮主

无邪发表于 2016-8-19 10:34
api.openFrame ({
name: 'to1',
url: 'http://www**.**/wap/',

不用调用是吧。。。直接用js就可以是吧

无邪

我是帮主发表于 2016-8-19 10:43
不用调用是吧。。。直接用js就可以是吧

对，你打开的新页面不是本地的吗，本地的再用openframe打开外部url就可以了,你试试看

我是帮主

无邪发表于 2016-8-19 10:46
对，你打开的新页面不是本地的吗，本地的再用openframe打开外部url就可以了,你试试看 ...

是这样写的吗？

<script type="text/javascript">
api.openFrame ({
name: 'to1',
url: 'http://www**.**',
rect:{
x:0,
y: 0,
w:'auto',
h:'auto'
},
bounces: false,
delay:200
});
</script>

复制代码

nevermind

我是帮主发表于 2016-8-19 10:43
不用调用是吧。。。直接用js就可以是吧

是的不需要调用直接使用api.openFrame({
name: 这里给当前打开的页面一个别名（不能重复）,
url: 'http://www**.**/wap/',
rect: {
      x: 0,
      y: 0,
      w: 'auto',
      h: 'auto'
},
bounces: true
});
就这样就可以了，然后你每个按钮可以全部调用一个方法，然后传入不同的参数来进行控制

无邪

我是帮主发表于 2016-8-19 10:48
是这样写的吗？

恩，你可以同步测试看看

求高手给解决图标打开是外部链接的问题。 [复制链接]