jQuery Mobile 1.2 を使用して、iOS 用の Cordova 2.0 アプリを作成しました。内部のフレームワーク。Childbrowser プラグインのインストールに成功しました (このバージョンとこのガイドを使用)。
これで、頭にこの JavaScript を使用して onclick イベントで Childbrowser を直接呼び出すことができます。
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
</script>
または、たとえば直接
<a href="#" onclick="window.plugins.childBrowser.showWebPage('http://www.google.de');"> Google</a>
ここで、属性を持つすべてのリンクを開きたいと思いますtarget="_blank"。したがって、このスレッドを見つけて、Charlie Gorichanaz による解決策を見つけました。
しかし、iPhone シミュレーターでアプリケーションを起動すると、sandclock というか、jQuery モバイルの死の糸車だけが表示されます。
このアプリの前にコーディングしたことはありませんでした。これが私のindex.htmlです
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="ChildBrowser.js"></script>
<gap:plugin name="ChildBrowser" /> <!-- latest release -->
<script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
/*
var args;
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
*/
</script>
<!-- jQuery mobile -->
<link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
<script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
<script>
// for using childbrowser to open pdf on remote sites
$(document).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
}
);
// the function i want to implement
$(document).bind("pageinit", function() {
onDeviceReady();
});
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;
if (cb != null) {
$('a[target="_blank"]').click(function(event) {
cb.showWebPage($(this).attr('href'));
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
}
}
// don't know is this thing is right in place...
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="a" data-position="fixed">
<div data-role="header"> <!-- header -->
<h1>Test</h1>
<div style="position:absolute; top:0px; right:5px;">
<a href="#about" data-transition="pop">
<img src="images/schlange-sw.png" alt="Schlange">
</a>
</div>
</div>
<!-- /header -->
<div data-role="content"> <!-- content -->
<a id="domainbut" onclick='launchCB()'>Working </a>
<a href="http://www.google.de/" target="_blank" data-role="button" data-inline="true"> not working </a>
</div>
<!-- content -->
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</section>
<section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Über</h1>
</div>
<div data-role="content">
<h1 style="text-align: center;"></h1>
<div align="center">
</div>
<p style="text-align: center;">The owner of this app</p>
<button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
<p>
<a href="#home" data-role="button" data-rel="back">OK</a>
</p>
</div>
</section>
</body>
</html>
前もって感謝します。
よろしく
キエケ