Monaca (Cordova) Iframe = 非常有问题？
Monaca (Cordova) Iframe = very buggy?
我正在使用 Monaca/Cordova/OnsenUI 和 iframe。在过去的 4 天里，我一直在努力让它顺利运行。
目标是在 Monaca 中创建一个具有 Iframe 的简单应用程序。并在 iframe 中显示网站。所以它看起来像是一个本机应用程序，但实际上只是一个添加了自定义工具栏的 Web 浏览器。
我的问题是：
- 与默认的移动 safari 浏览器相比，iframe 的内容加载速度非常慢。
- 导航（滚动、单击 link）有很多问题，有时无法正常工作。
代码：
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>
已安装的组件：
- Cordova (PhoneGap) 加载程序版本=1.0.0
- Monaca 核心实用程序版本=2.0.4
- jQuery (Monaca 版本) ver=2.0.3
启用的 Cordova 插件：
- InAppBrowser
- Monaca 插件
- 启动画面
- 状态栏
- 白名单
我从这个模板开始：
- Onsen UI V2 JS Tabbar（Onsen UI v2 + JavaScript Tabbar）
我正在使用 Monaca Debugger 应用程序 Iphone6 在 wifi 上进行测试 iOS
非常感谢任何帮助！
我在 Monaca Cloud IDE 中测试了您的代码，发现有两个问题：
- jQuery 缺少库。
- 在您的 iFrame 中，出现以下错误：
Mixed Content: The page at 'https://world-switch.com/komaki/mypage/' was loaded over HTTPS, but requested an insecure image 'http://worldswitch-html-upload.world-switch.com/kyoto-komaki.jp/save_image/'. This request has been blocked; the content must be served over HTTPS.
解决方案：
- 将 jQuery 库添加到您的项目中。
- 在
index.html文件中，将所有https改为http。
对我来说效果很好，iFrame 的加载也没有任何延迟。希望这可以帮助。祝你好运！
我正在使用 Monaca/Cordova/OnsenUI 和 iframe。在过去的 4 天里，我一直在努力让它顺利运行。
目标是在 Monaca 中创建一个具有 Iframe 的简单应用程序。并在 iframe 中显示网站。所以它看起来像是一个本机应用程序，但实际上只是一个添加了自定义工具栏的 Web 浏览器。
我的问题是：
- 与默认的移动 safari 浏览器相比，iframe 的内容加载速度非常慢。
- 导航（滚动、单击 link）有很多问题，有时无法正常工作。
代码：
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>
已安装的组件：
- Cordova (PhoneGap) 加载程序版本=1.0.0
- Monaca 核心实用程序版本=2.0.4
- jQuery (Monaca 版本) ver=2.0.3
启用的 Cordova 插件：
- InAppBrowser
- Monaca 插件
- 启动画面
- 状态栏
- 白名单
我从这个模板开始：
- Onsen UI V2 JS Tabbar（Onsen UI v2 + JavaScript Tabbar）
我正在使用 Monaca Debugger 应用程序 Iphone6 在 wifi 上进行测试 iOS
非常感谢任何帮助！
我在 Monaca Cloud IDE 中测试了您的代码，发现有两个问题：
- jQuery 缺少库。
- 在您的 iFrame 中，出现以下错误：
Mixed Content: The page at 'https://world-switch.com/komaki/mypage/' was loaded over HTTPS, but requested an insecure image 'http://worldswitch-html-upload.world-switch.com/kyoto-komaki.jp/save_image/'. This request has been blocked; the content must be served over HTTPS.
解决方案：
- 将 jQuery 库添加到您的项目中。
- 在
index.html文件中，将所有https改为http。
对我来说效果很好，iFrame 的加载也没有任何延迟。希望这可以帮助。祝你好运！