为啥 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 应用程序中不起作用?的主要内容,如果未能解决你的问题,请参考以下文章
如何修复 Cordova/Phonegap 中的 iFrame 问题(iOS)?
PhoneGap 中的 postMessage 不起作用 - iframe 到父消息传递