如何在 Web 浏览器和 XCode 中使用 JavaScript 运行 HTML 文件？
Posted
技术标签:
【中文标题】如何在 Web 浏览器和 XCode 中使用 JavaScript 运行 HTML 文件？【英文标题】：How to Run the HTML file with JavaScript in Web Browser and XCode? 【发布时间】：2012-09-05 09:32:40 【问题描述】：我想使用 phonegap Cordova 2.0 创建 iPhone 应用程序。现在i wrote javascript external and html code。然后我放了JavaScript code into the HTML5 file。现在我想在网络浏览器上运行 HTML 文件。当我在浏览器中运行 HTML 时，Javascript 不起作用。浏览器显示 HTML 中的任何内容。所以你能帮我run the HTML5 file with JavaScript on the browser and in XCode Phonegap。
下面的代码是 JavaScript 代码。
var bodyLoaded = function()
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova is ready
//
function onDeviceReady()
var options = new ContactFindOptions();
options.filter="";
filter = ["displayName","organizations"];
navigator.contacts.find(filter, onSuccess, onError, options);
// onSuccess: Get a snapshot of the current contacts
//
function onSuccess(contacts)
for (var i=0; i<contacts.length; i++)
for (var j=0; j<contacts[i].organizations.length; j++)
alert("Pref: " + contacts[i].organizations[j].pref + "\n" +
"Type: " + contacts[i].organizations[j].type + "\n" +
"Name: " + contacts[i].organizations[j].name + "\n" +
"Department: " + contacts[i].organizations[j].department + "\n" +
"Title: " + contacts[i].organizations[j].title);
;
// onError: Failed to get the contacts
//
function onError(contactError)
alert('onError!');
下面的代码位于我的 HTML5 中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="Contectscript.js"></script>
</head>
<body>
<body onload='alert(1);'>
<body onload='bodyLoaded();'>
<h1>Example</h1>
<p>Find Contacts</p>
</body>
</html>
提前致谢。
【问题讨论】：
为什么要在开头设置window.location.href？你为什么使用 javascript 的绝对路径？ @SoonDead 我已按照您的想法再次尝试，但我没有得到解决方案。我已经编辑了我的问题。请看一下，请帮助获得解决方案。提前致谢。 你能调试javascript吗？如果没有，请尝试添加一些警报（“已达到”）；代码行以查看已达到的内容和未达到的内容。 我也不确定网络浏览器是否有“设备就绪”事件？ @SoonDead 我遵循了你的想法，但我没有得到解决方案。所以我编辑了我的问题并添加了完整的 HTML 源代码供您参考。请建议我在我的代码中做错了什么。提前致谢。 【参考方案1】：好的，你正在开发一个 PhoneGap 应用程序。
在 PhoneGap 中有一个名为“deviceready”的特殊事件，它会在 PhoneGap 完全加载时触发。
在此事件触发之前不要调用任何 PhoneGap 函数，这一点非常重要。可能函数还没有加载。
你的问题是：
您正在尝试在浏览器中测试 javascript。 PhoneGap 提供从您的手机到您的应用程序的服务。由于您是从 Web 浏览器运行它，因此没有电话可以提供服务。您不能简单地在网络浏览器中运行您的应用程序。
您没有引用 phonegap.js。 PhoneGap 有一个 javascript 部分，您的应用程序必须加载该部分才能工作。你应该在你自己的脚本之前有一个像<script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 这样的行（当然文件名可以根据你使用的phonegap版本而有所不同，它可以被称为cordova.js）。
您的 html 包含一些愚蠢的东西。有 3 个开口体标签。应该只有 1 个。您需要这样的 HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Contact Example</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8" src="Contectscript.js"></script>
</head>
<body onload="bodyLoaded();">
<h1>Example</h1>
<p>Find Contacts</p>
</body>
</html>
如何解决这些问题？
在 XCode 中开发。有一个内置的模拟器。它也为你做管道。无需您的外部网络浏览器。在您的问题中，您已经谈到了 XCode，所以这可能是一个不错的选择。阅读这篇关于在那里设置和运行项目的文章：http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-xcode-for-ios.html
使用Ripple Emulator。它是一款专为在 google chrome 浏览器中模拟手机而设计的模拟器。它可以让您的应用程序相信它作为 PhoneGap 应用程序在您的手机中运行，并且您的手机的所有功能都可用，如加速度计、gps 等。它还为您模拟 deviceready 事件。 :)
就像每个框架一样，研究Documentation 是一个非常好的主意。有一个很好的入门指南，您可以找到有关 PhoneGap 的每个问题的答案。
请阅读并研究我为您提供的链接。它将帮助您了解您想要做什么。
【讨论】：
【参考方案2】：首先，尝试：
<body onload='alert(1);' ...>
是否反应正确。然后继续：
var bodyLoaded = function()
document.addEventListener("deviceready", onDeviceReady, false);
<body onload='bodyLoaded();'>
【讨论】：
我已按照您的代码进行操作，但没有得到解决方案。所以我编辑了我的问题并添加了完整的 HTML 源代码供您参考。请建议我在我的代码中做错了什么。提前致谢。 不要同时添加它们:)。这只是确认您的身体加载被触发（没有任何干扰）。所以先试试，然后再试试 bodyLoaded 函数。 感谢您的回复。我从 HTML 代码中删除了 ，并在每个方法中添加了警报。但是 bodyLoaded 只调用了，其他方法没有调用。我已经在所有方法中添加了警报，例如函数 onDeviceReady()、函数 onSuccess(contacts)，但这些方法没有被调用。你能指导我解决这个问题吗？提前致谢。以上是关于如何在 Web 浏览器和 XCode 中使用 JavaScript 运行 HTML 文件？的主要内容，如果未能解决你的问题，请参考以下文章
如何让 Xcode 在混合应用程序的 web 视图中查找元素？
我可以在 Xcode 中使用 Spotify Web API 来开发原生 iOS 应用程序吗？