个人中心
gpt4 book ai didi

javascript - Monaca (Cordova) Iframe = 非常有问题？

转载 作者：行者123 更新时间：2023-12-01 05:30:31 27 4
gpt4 key购买 nike

我正在使用 Monaca/Cordova/OnsenUI 和 Iframe。在过去的四天里，我一直在努力让它顺利工作。

目标是在 Monaca 中创建一个具有 Iframe 的简单应用程序。并在 iframe 中显示网站。因此，它感觉像是一个 native 应用程序，但实际上只是一个添加了自定义工具栏的网络浏览器。

我的问题是:

  • 与默认的移动 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;
}

配置.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 标签栏(Onsen UI v2 + JavaScript 标签栏)

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

非常感谢任何帮助!

最佳答案

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

  1. 缺少 jQuery 库。
  2. 在您的 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.

解决方案:

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

它对我来说工作得很好，iFrame 的加载也没有任何延迟。希望这可以帮助。祝你好运!

关于javascript - Monaca (Cordova) Iframe = 非常有问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37852854/

27 4 0
文章推荐： python - 将 JS 代码转换为 XML 编码的 AST 树
文章推荐： rest - 找不到时如何处理 Web API ("REST") 中的嵌套资源？
文章推荐： java - Seam Solder @MessageBundle 生成实现类 Maven 错误
文章推荐： python - 如何在 django 中启动没有任何数据库的应用程序
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com