javascriptjquerycordovaiframemonaca

Monaca (Cordova) Iframe = very buggy?

I'm using Monaca/Cordova/OnsenUI and an Iframe. I have been trying to get this to work smoothly for the last 4 days.

The goal was to create a simple application in Monaca which has an Iframe. And display the web site in the iframe. So it would feel like a native application but actually just be a web browser with custom toolbars added.

My problems are:

Code:

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>

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

Installed Components:

Enabled Cordova Plugins:

I started from this template:

I am testing on wifi with an Iphone6 using Monaca Debugger application for iOS

Any help is very much appreciated!

Solution

  • I tested your code in Monaca Cloud IDE and found that there are two issues:

    1. jQuery library is missing.
    2. In your iFrame, there is this error:

    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.

    Solution:

    1. Add jQuery library into your project.
    2. In the index.html file, change all https to http.

    It works fine for me and the iFrame is loaded without any delays as well. Hope this helps. Good luck!