2
Я использую Monaca/Cordova/OnsenUI и iframe. Я пытался заставить это работать гладко в течение последних 4 дней.Monaca (Cordova) Iframe = очень багги?
Целью было создание простого приложения в Monaca с IFrame. И покажите веб-сайт в iframe. Таким образом, это будет похоже на собственное приложение, но на самом деле просто будет веб-браузер с добавленными настраиваемыми панелями инструментов.
Мои проблемы:
- содержание скорость загрузки в IFrame является очень медленно, по сравнению с браузером Mobile Safari по умолчанию.
- Навигация (прокрутка, щелчок по ссылке) очень глючит, а иногда и не работает.
Код:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="lib/onsenui/css/onsenui.css">
<link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css">
<link rel="stylesheet" href="css/style.css"-->
<script>
$(function()
{
$('#iframe').load(function()
{
var phoneWidth = $(window).width();
$('#iframe').contents().find('html').css("max-width", phoneWidth);
});
});
</script>
<script>
$(function()
{ // Hide iframe while loading
$('#loader').show();
$('#iframe').hide();
$('#iframe').load(function(){
// If logged in -> go to home page
if ($('#iframe').attr("src") == "https://world-switch.com/komaki/mypage/" && $('#iframe').contents().find('#wrapper').length == 0){ // logged in
$('#iframe').attr("src","https://world-switch.com/komaki/");
}else{
// set size iframe content: forces mobile styling
var phoneWidth = $(window).width();
$('#iframe').contents().find('html').css("max-width", phoneWidth);
$('#iframe').contents().find('#hLogoCenter').attr("class", "vhidden");
$('#iframe').show(); // show iframe
$('#loader').hide(); // hides loading icon
navigator.splashscreen.hide(); // hides splash screen
}
});
});
function fnSetURL(url){
$('#loader').show();
$('#iframe').attr("src",url);
$('#iframe').hide();
}
</script>
</head>
<body>
<!-- Transparent Top toolbar -->
<div class="navigation-bar navigation-bar--transparent">
<div class="navigation-bar__left"></div>
<div class="navigation-bar__center"></div>
<div class="navigation-bar__right"></div>
</div>
<div id="iframe_mask">
<div id="loader">
<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>
</div>
<iframe id="iframe" src="https://world-switch.com/komaki/mypage/" height="100%" width="100%"></iframe>
</div>
<!-- Bottom tab bar -->
<div class="tab-bar tab-bar--top-border">
<label class="tab-bar__item">
<input type="radio" id="0" name="top-tab-bar-b" onClick="fnSetURL('https://world-switch.com/komaki/');">
<button class="tab-bar__button tab-bar--top-border__button">
<span><i class="fa fa-home" aria-hidden="true"></i></span>
</button>
</label>
<label class="tab-bar__item tab-bar--top-border__item">
<input type="radio" id="1" name="top-tab-bar-b" onClick="fnSetURL('https://world-switch.com/komaki/products/list.php');">
<button class="tab-bar__button tab-bar--top-border__button">
<span><i class="fa fa-search" aria-hidden="true"></i></span>
</button>
</label>
<label class="tab-bar__item tab-bar--top-border__item">
<input type="radio" id="2" name="top-tab-bar-b" onClick="fnSetURL('https://world-switch.com/komaki/products/genre.php?ctg=brand&clm=2');">
<button class="tab-bar__button tab-bar--top-border__button">
<span><i class="fa fa-folder-open-o" aria-hidden="true"></i></span>
</button>
</label>
<label class="tab-bar__item tab-bar--top-border__item">
<input type="radio" id="3" name="top-tab-bar-b" onClick="fnSetURL('https://world-switch.com/komaki/mypage/favorite.php');">
<button class="tab-bar__button tab-bar--top-border__button">
<span><i class="fa fa-heart" aria-hidden="true"></i></span>
</button>
</label>
</div>
</body>
</html>
В style.css:
/**/
html,body
{
width:100%;
height:100%;
padding:0;
margin:0;
}
iframe
{
padding:0;
margin:0;
border:0;
}
#iframe_mask {
height:calc(100% - 49px);
width:100%;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
#loader{
position: absolute;
left: 45%;
top: 48%;
z-index: 9999;
}
.navigation-bar{
background: url('https://world-switch.com/komaki/user_data/packages/kyoto-komaki.jp/default/img/header_logo_m.png') #000 no-repeat 50% 50%;
background-size: 120px;
color:#fff;
}
.tab-bar{
background-color: #000;
}
:checked + .tab-bar__button {
color: #fff;
}
:checked + .tab-bar--top-border__button {
border-bottom-color: #fff;
}
config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" id="com.example.helloworld" version="1.0.0">
<name>Minimum Template</name>
<description></description>
<author></author>
<content src="index.html" />
<access origin="*"/>
<allow-navigation href="*" />
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<preference name="DisallowOverscroll" value="true"/>
<preference name="Orientation" value="default"/>
<preference name="loglevel" value="DEBUG" />
<preference name="AndroidLaunchMode" value="singleTop" />
<preference name="ErrorUrl" value=""/>
<preference name="Fullscreen" value="false"/>
<preference name="KeepRunning" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="1000"/>
<preference name="AllowInlineMediaPlayback" value="false" />
<preference name="AutoHideSplashScreen" value="true" />
<preference name="BackupWebStorage" value="cloud" />
<preference name="EnableViewportScale" value="false" />
<preference name="FadeSplashScreen" value="true" />
<preference name="FadeSplashScreenDuration" value=".25" />
<preference name="KeyboardDisplayRequiresUserAction" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />
<preference name="ShowSplashScreenSpinner" value="false" />
<preference name="SuppressesIncrementalRendering" value="false" />
<preference name="TopActivityIndicator" value="gray" />
<preference name="GapBetweenPages" value="0" />
<preference name="PageLength" value="0" />
<preference name="PaginationBreakingMode" value="page" />
<preference name="PaginationMode" value="unpaginated" />
<feature name="LocalStorage">
<param name="ios-package" value="CDVLocalStorage" />
</feature>
<preference name="UIWebViewDecelerationSpeed" value="normal" />
<preference name="monaca:AndroidIsPackageNameSeparate" value="false"/>
<preference name="monaca:targetFamilyiPhone" value="1"/>
<preference name="monaca:targetFamilyiPad" value="1"/>
</widget>
установлен Comp onents:
- Кордова (PhoneGap) Loader версия = 1.0.0
- Monaca Ядро Utility Ver = 2.0.4
- JQuery (Monaca Version) вер = 2.0.3
Enabled Кордова Плагины:
- InAppBrowser
- Monaca Plugin
- SplashScreen
- Статусная
- Whitelist
Я начал с этого шаблона:
- онсэн UI V2 JS TabBar (онсэн UI v2 + JavaScript TabBar)
Я тестирование на Wi-Fi с помощью Iphone6 с использованием приложения Monaca Debugger для iOS
Любая помощь очень ценится!