如何将外部 ExtJS 构建的应用程序加载到 Air 沙箱中
我是 Adobe Air 的新手，所以这个问题可能很明显，但我连续几天都无法开始工作。
我正在尝试使用 air 构建一个应用程序，其中嵌入了所需的代码，以构建启动流程并从部署的 Web 应用程序中获取运行时所需的资源并将其注入主应用程序中。我构建了两个不同的沙箱（主 Air 应用程序的父沙箱，以及作为已部署应用程序的子沙箱的 iframe）。这就是我所做的：
air.html
<html>
<head>
...
<script type="text/javascript" src="/scripts/app/load.js"></script>
</head>
<body id="baseBody" onload="Load.init();">
<iframe
id="sandbox"
sandboxRoot="http://localhost:8080/webapp/"
style="width:0;height:0;display:none;"
ondominitialize="Load.bridge();">
</iframe>
</body>
</html>
load.js（父沙箱）
Load = function() {
return {
sandbox: null,
bridge: function() {
document.getElementById('sandbox').contentWindow.parentSandboxBridge = {
initChild: function() {
sandbox = document.getElementById('sandbox').contentWindow.childSandboxBridge;
sandbox.loadSignin();
sandbox.buildParent();
},
buildBase: function() {
signin = new App.Signin({
...
});
new Ext.air.Window({
...
items: [signin],
...
});
},
importing: function(url) {
// Creating Script tag and Append it to Head tag
}
};
},
init: function() {
document.getElementById('sandbox').src = './load';
}
};
}();
load（子沙箱上的JSP）
<html>
<head>
<script type="text/javascript" src="http://localhost:8080/webapp/scripts/app/load.js"></script>
</head>
<body onload="Load.init();"></body>
</html>
load.js（子沙箱）
Load = function() {
return {
init: function() {
window.childSandboxBridge = {
loadSignin: function() {
// "The Line"
window.parentSandboxBridge.importing('/path/to/signin/script/on/web/server');
},
buildParent: function() {
window.parentSandboxBridge.buildBase();
}
window.parentSandboxBridge.initChild();
};
}
};
}();
signin.js
Ext.namespace('App.Signin');
App.Signin = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
var formPanelConfig = {
items: [{
...
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, formPanelConfig));
App.Signin.superclass.initComponent.apply(this, arguments);
}
});
我在上面提到的“The Line”上尝试了不同的方法，例如仅插入 url，通过 ajax 获取内容并传递内容，将 eval() 编辑的内容传递到父沙箱。不管怎样，我得到了表达式“App.Signin”的结果[未定义]不是构造函数。而且，它在 Air Introspector 的 DOM 元素中也不可用。
我记得在 onLoad 事件之前读到过有关加载 javascript 的内容，但我不记得具体在哪里，更重要的是我不知道如何实现它。我的做法不是在onLoad之前吗？
或者您能给我看一下解决这个问题的指南吗？
I'm new to Adobe Air, so the question might be obvious, but I couldn't get to work for days of struggling with it.
I'm trying to build an application with air which has the embedded required code, to build the starting process and fetching runtime-required resources from the deployed web application and inject it in the main application. I've build the two different sandboxes (parent sandbox for main air app, and an iframe as child sandbox for deployed app). here's what I've done:
air.html
<html>
<head>
...
<script type="text/javascript" src="/scripts/app/load.js"></script>
</head>
<body id="baseBody" onload="Load.init();">
<iframe
id="sandbox"
sandboxRoot="http://localhost:8080/webapp/"
style="width:0;height:0;display:none;"
ondominitialize="Load.bridge();">
</iframe>
</body>
</html>
load.js (Parent sandbox)
Load = function() {
return {
sandbox: null,
bridge: function() {
document.getElementById('sandbox').contentWindow.parentSandboxBridge = {
initChild: function() {
sandbox = document.getElementById('sandbox').contentWindow.childSandboxBridge;
sandbox.loadSignin();
sandbox.buildParent();
},
buildBase: function() {
signin = new App.Signin({
...
});
new Ext.air.Window({
...
items: [signin],
...
});
},
importing: function(url) {
// Creating Script tag and Append it to Head tag
}
};
},
init: function() {
document.getElementById('sandbox').src = './load';
}
};
}();
load (JSP on child sandbox)
<html>
<head>
<script type="text/javascript" src="http://localhost:8080/webapp/scripts/app/load.js"></script>
</head>
<body onload="Load.init();"></body>
</html>
load.js (Child sandbox)
Load = function() {
return {
init: function() {
window.childSandboxBridge = {
loadSignin: function() {
// "The Line"
window.parentSandboxBridge.importing('/path/to/signin/script/on/web/server');
},
buildParent: function() {
window.parentSandboxBridge.buildBase();
}
window.parentSandboxBridge.initChild();
};
}
};
}();
signin.js
Ext.namespace('App.Signin');
App.Signin = Ext.extend(Ext.form.FormPanel, {
initComponent: function() {
var formPanelConfig = {
items: [{
...
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, formPanelConfig));
App.Signin.superclass.initComponent.apply(this, arguments);
}
});
I've tried different thing on "The Line" mentioned above, such as inserting just the url, getting the content by ajax and passing the content, passing the eval()-ed content to parent sandbox. and no matter which, I got Result of expression 'App.Signin' [undefined] is not a constructor. And well, it is Not available in the DOM element in Air Introspector as well.
I remember reading somewhere about loading javascript before onLoad event but I couldn't recall where exactly, and more important I don't know how to implement it. Isn't my approach before onLoad?
Or could you please show me the guide to solve this problem.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
也许“简单任务”（AIR）的例子可以帮助你
may be the example "Simple Tasks"(AIR) can help u