我在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>
以下是我的索引.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);
}
});
我能够看到文本"一些文本在这里",但看不到我尝试使用javascript创建的画布。
是否有任何需要指定的配置?还是其他原因?
谢谢。
问题是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);
}
},
...