javascript ExtJS 4.1 从外部网页加载内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18310641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS 4.1 load content from external web page
提问by Marco
I've a Ext.panel.Paneland I would load content from an external web page into my panel.
我有一个Ext.panel.Panel，我会将外部网页中的内容加载到我的面板中。
I've tried to use the loader as described here: loader question
我尝试使用这里描述的加载器： 加载器问题
and you can found an example in this jsfiddle: http://jsfiddle.net/eternasparta/sH3fK/
你可以在这个 jsfiddle 中找到一个例子：http: //jsfiddle.net/eternasparta/sH3fK/
Ext.require([
'Ext.form.*',
'Ext.tip.*'
]);
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.create('Ext.panel.Panel',{
renderTo: Ext.getBody(),
height:400,
width:400,
id:'specific_panel_id'
});
dynamicPanel = new Ext.Component({
loader: {
/*load contents from this url*/
url: 'http://it.wikipedia.org/wiki/Robot',
renderer: 'html',
autoLoad: true,
scripts: true
}
});
Ext.getCmp('specific_panel_id').add(dynamicPanel);
});
Probably I haven't understood how to use loader (if it is possible) with external web pages. So my first question is: Is it possible to load the page http://it.wikipedia.org/wiki/Robotinto my panel using loader?
可能我还没有理解如何在外部网页中使用 loader（如果可能的话）。所以我的第一个问题是：是否可以使用加载器将页面http://it.wikipedia.org/wiki/Robot加载到我的面板中？
The second question: If the answer is "no" how do you suggest to load the content of that page?
第二个问题：如果答案是“否”，您建议如何加载该页面的内容？
Thank you all
谢谢你们
回答by Alex Tokarev
For external content, you will have to use an iframe. However if you want that iframe's dimensions to be managed by its container panel, you'll have to make it a component instead of just using htmlproperty:
对于外部内容，您必须使用 iframe。但是，如果您希望 iframe 的尺寸由其容器面板管理，则必须使其成为一个组件，而不仅仅是使用html属性：
Ext.define('MyIframePanel', {
extend: 'Ext.panel.Panel',
layout: 'fit',
items: [{
xtype: 'box',
autoEl: {
tag: 'iframe',
src: 'http://it.wikipedia.org/wiki/Robot',
},
}]
});
See also an example with a Window and dynamic page loading in my recent blog post: http://nohuhu.org/development/using-render-selectors-to-capture-element-references/.
另请参阅我最近的博客文章中的窗口和动态页面加载示例：http: //nohuhu.org/development/using-render-selectors-to-capture-element-references/。
回答by Vlad
It is a security reasons (Access-Control-Allow-Origin).
这是一个安全原因（Access-Control-Allow-Origin）。
You can just set "html" property of your panel as:
您可以将面板的“html”属性设置为：
html: '<iframe src="http://it.wikipedia.org/wiki/Robot"></iframe>',
See: http://jsfiddle.net/sH3fK/2/
见：http: //jsfiddle.net/sH3fK/2/
If you load the page from the same domain, you can just set "loader" property of your panel:
如果您从同一个域加载页面，您只需设置面板的“加载器”属性：
Ext.create('Ext.panelPanel', {
...
loader: {
url: 'content.html', //<-- page from the same domain
autoLoad: true
},
renderTo: Ext.getBody(),
...
});
