Monaca（科尔多瓦）Iframe =非常马车？

时间：2016-06-16 07:43:23

标签： javascript jquery cordova iframe monaca

我正在使用Monaca / Cordova / OnsenUI和iframe。在过去的4天里，我一直在努力使这项工作顺利进行。

目标是在Monaca中创建一个具有Iframe的简单应用程序。并在iframe中显示该网站。所以它就像一个本机应用程序，但实际上只是一个添加了自定义工具栏的Web浏览器。

我的问题是：

  • 与默认的移动Safari浏览器相比，iframe的内容加载速度非常慢。
  • 导航（滚动，点击链接）非常错误，有时无效。

代码：

的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）Loader ver = 1.0.0
  • Monaca Core Utility ver = 2.0.4
  • jQuery（Monaca Version）ver = 2.0.3

启用Cordova插件：

  • InAppBrowser
  • Monaca Plugin
  • 溅射屏幕
  • 状态栏
  • 白名单

我从这个模板开始：

  • Onsen UI V2 JS Tabbar（Onsen UI v2 + JavaScript Tabbar）

我正在使用适用于iOS的Monaca Debugger应用程序使用Iphone6进行wifi测试

非常感谢任何帮助！

1 个答案:

答案 0 :(得分：0)

我在Monaca Cloud IDE中测试了您的代码，发现存在两个问题：

  1. 缺少jQuery库。
  2. 在您的iFrame中，出现此错误：
    3.   

    混合内容：“https://world-switch.com/komaki/mypage/”页面是通过HTTPS加载的，但请求的是不安全的图片“http://worldswitch-html-upload.world-switch.com/kyoto-komaki.jp/save_image/”。此请求已被阻止;内容必须通过HTTPS提供。

    解决方案：

    1. 将jQuery库添加到项目中。
    2. 在index.html文件中，将所有https更改为http。

      3. 它适用于我，iFrame也没有任何延迟加载。希望这可以帮助。祝你好运！

相关问题
最新问题