无法在 Sencha-Touch2 中使用 Ext.Ajax 运行 javascript？
Posted
技术标签:
【中文标题】无法在 Sencha-Touch2 中使用 Ext.Ajax 运行 javascript？【英文标题】：Unable to run javascript using Ext.Ajax in Sencha-Touch2? 【发布时间】：2012-09-20 16:25:40 【问题描述】：我在论坛here 中讨论过的 Sencha-Touch 中使用 htmlPanel.js 来显示本地 html 内容。我可以使用普通的 html 标签加载 html 内容，但不能加载 javascript。
下面是我使用的htmlPanel.js：
Ext.define('HTMLPanel',
extend: 'Ext.Panel',
// We are using Ext.Ajax, so we should require it
requires: ['Ext.Ajax'],
config:
listeners:
activate: 'onActivate'
,
// Create a new configuration called `url` so we can specify the URL
url: null
,
onActivate: function(me, container)
Ext.Ajax.request(
// we should use the getter for our new `url` config
url: 'htmlTest.html',//this.getUrl(),
method: "GET",
success: function(response, request)
// We should use the setter for the HTML config for this
//Ext.Msg.alert('Alert', 'Success!!!', Ext.emptyFn);
me.setHtml(response.responseText);
,
failure: function(response, request)
//Ext.Msg.alert('Alert', 'Failure!!!', Ext.emptyFn);
me.setHtml("failed -- response: " + response.responseText);
);
);
下面是我的htmlTest.html：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas">Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript" charset="utf-8">
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,640,1280);
</script>
<h1>This is some text in a paragraph.</h1>
</body>
</html>
下面是我的 index.js：
Ext.application(
name: 'SampleLoad',
launch: function ()
//loadURL('htmlTest.html');
Ext.Viewport.add(
url: 'htmlTest.html',
xclass: "HTMLPanel",
);
// Add the new HTMLPanel into the viewport so it is visible
Ext.Viewport.add(HTMLPanel);
);
我可以看到“Some text is here.”文字，但看不到我尝试使用 javascript 创建的画布。
是否有需要指定的配置？还是其他原因？
谢谢。
【问题讨论】：
【参考方案1】：问题是 HTML 被植入到 DOM 中，但脚本没有被执行。赋值给 innerHtml 就是这种情况，也可能是 setHtml()。
您可以通过在拼接 HTML 后立即在渲染元素中显式执行脚本来解决此问题。您的 htmlPanel.js 将如下所示：
...
// We should use the setter for the HTML config for this
//Ext.Msg.alert('Alert', 'Success!!!', Ext.emptyFn);
me.setHtml(response.responseText);
var scriptArray = me.renderElement.dom.getElementsByTagName("script");
for(var i=0;i<scriptArray.length;i++)
eval(scriptArray[i].text);
,
...
【讨论】：
+1 不错的解决方案！但是有没有更优雅的方法来实现这一点？无需提取 JavaScript？以上是关于无法在 Sencha-Touch2 中使用 Ext.Ajax 运行 javascript？的主要内容，如果未能解决你的问题，请参考以下文章
Sencha-Touch：未捕获的类型错误：无法读取未定义的属性“代理”