为啥 iframe 中的链接在 phonegap ios 应用程序中不起作用?

Posted

技术标签:

【中文标题】为啥 iframe 中的链接在 phonegap ios 应用程序中不起作用?【英文标题】:Why links inside an iframe not working in a phonegap ios application?为什么 iframe 中的链接在 phonegap ios 应用程序中不起作用? 【发布时间】:2015-03-26 11:11:01 【问题描述】:

我正在开发一个 Phonegap ios 应用程序。我的一个页面包含一个 iframe。我有一个文本框,用户可以在其中输入 URL。文本框中的 URL 将设置 iframe 源。用户应该能够在 iframe 中导航。之后我必须将 URL 保存在数据库中。我已应用 smartzoom jquery 插件来缩放 iframe,它工作正常。在 safari 中的链接可以工作,但在模拟器中的链接是不可点击的。如何使 iframe 中的链接可点击?这是jsfiddle 链接我到目前为止所做的事情,它在 brwoser 中运行良好,但在模拟器中却没有。

<div id="positionButtonDiv">
    <p> <span>
                    <img id="btnzoomIn" class="zoomButton" src="http://e-smartdev.com/github/smartJQueryZoom/example/assets/zoomIn.png"   title="zoom in"  /> 
                    <img id="btnzoomOut" class="zoomButton" src="http://e-smartdev.com/github/smartJQueryZoom/example/assets/zoomOut.png"   title="zoom out"  /> 
                    </span>

    </p>
    <p> <span class="positionButtonSpan">
                    <map name="positionMap" class="positionMapClass">
                    <area id="btnUp" shape="rect" coords="20,0,40,20" title="move up"  />
                    <area id="btnLeft" shape="rect" coords="0,20,20,40" title="move left"  />
                    <area id="btnRight" shape="rect" coords="40,20,60,40" title="move right"  />
                    <area id="btnDown" shape="rect" coords="20,40,40,60" title="move bottom"  />
                    </map>
                    <img src="http://e-smartdev.com/github/smartJQueryZoom/example/assets/position.png"   usemap="#positionMap"> 
                    </span>

    </p>
</div>
<div id="viewsites" class="viewsites">
    <iframe scrolling="no" id="viewsite_iframe" sandbox="allow-scripts allow-popups allow-forms" src="" class="clsIframe"></iframe>
</div>

js代码

$(document).ready(function () 

    $('#btnUp,#btnLeft,#btnRight,#btnDown').bind("click", moveButtonClickHandler);
    $('#btnzoomIn,#btnzoomOut').bind("click", zoomButtonClickHandler);

    function zoomButtonClickHandler(e) 
        var scaleToAdd = 0.8;
        if (e.target.id == 'btnzoomOut') scaleToAdd = -scaleToAdd;
        $('#viewsite_iframe').smartZoom('zoom', scaleToAdd);
    

    function moveButtonClickHandler(e) 
        var pixelsToMoveOnX = 0;
        var pixelsToMoveOnY = 0;

        switch (e.target.id) 
            case "btnLeft":
                pixelsToMoveOnX = 50;
                break;
            case "btnRight":
                pixelsToMoveOnX = -50;
                break;
            case "btnUp":
                pixelsToMoveOnY = 50;
                break;
            case "btnDown":
                pixelsToMoveOnY = -50;
                break;
        
        $('#viewsite_iframe').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
    


    try 

        $('#viewsite_iframe').attr('src', "http://www.w3schools.com/");
        if ($('#viewsite_iframe').smartZoom('isPluginActive')) 
            $('#viewsite_iframe').smartZoom('destroy');
        
        $('#viewsite_iframe').smartZoom(
            'containerClass': 'zoomContainer',
                'easing': 'smartZoomEasing',
                'dblClickEnabled': true, // enable plugin mouse doubleClick behviour
            'mouseMoveEnabled': false, // enable plugin target drag behviour
            'moveCursorEnabled': true, // show moveCursor for drag
            'touchEnabled': true, // enable plugin touch interaction 
            'dblTapEnabled': true, // enable plugin double tap behaviour 
            'pinchEnabled': true, // enable zoom when user pinch on target
            'touchMoveEnabled': true, // enable target move via touch
            'maxScale': 1.8,
                'zoom': 0.1
        );
     catch (e) 
        alert(e)
    
);

【问题讨论】:

您必须在 Cordova IOS 应用程序的 Appdelegate.m 中为 webview 编写链接单击 不,我不想在移动浏览器 safari 中打开链接 我想在 iframe 中打开 iframe 链接而不是在外面 当我在浏览器中打开页面时链接正常,但在模拟器中链接不起作用 【参考方案1】:

您是否使用 phonegap 开发者应用程序来测试您的应用程序?如果是,对于外部链接,在 phonegap 开发人员应用程序上使用 IFrame 无法正常工作。您需要构建 ipa 文件。

【讨论】:

你有什么信息说明为什么会这样吗?

以上是关于为啥 iframe 中的链接在 phonegap ios 应用程序中不起作用?的主要内容,如果未能解决你的问题,请参考以下文章

嵌入 iframe 中的 phonegap 相机捕获

如何修复 Cordova/Phonegap 中的 iFrame 问题(iOS)?

PhoneGap 中的 postMessage 不起作用 - iframe 到父消息传递

为啥外部链接在构建后在 phonegap 应用程序上不起作用

iOS PhoneGap。防止 iFrame 缓存

Iphone Phonegap 链接打开方式不同,为啥?