Question

我正在使用django和extjs。我在extjs iframe中创建了一个html页面

items: [{
     html: '<iframe src="/page/object/" width="100%" height="100%"></iframe>'
 }],

views.py呈现html

中的iframe页面

return render(request, 'page.html', {
    'items': item
})

我想在iframe的html页面上使用Ext.fly("")添加内容（createchild）。

有可能吗？如何？

Answer 1

当然，以下所有内容都假设IFrame是从同一个域加载的（同源策略）;但是，考虑到你的例子，情况似乎就是这样。如果您从其他域加载IFrame，浏览器将阻止您几乎与其进行任何交互（您只能更改哈希值...）。

因此，首先，您需要获取对IFrame DOM元素的引用（而不是Ext的元素）。然后，您可以通过这种方式获取IFrame document对象的引用（从here中窃取）：

// iframe is the DOM element
var iframeWindow = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument,
    doc = iframeWindow.document;

然后您可以使用Ext.get(doc)或Ext.fly(doc)，并使用返回的包装器Ext Element。

这是一个完整的示例，它定义了“iframe组件”，等待其加载事件，并添加了一个子项：

items: [{
    xtype: "component"

    // using autoEl instead of html property, so the iframe will be the `el` 
    // property of the component
    ,autoEl: {
        tag : "iframe"
        ,src: "/page/object/"
        ,frameborder: 0
    }

    // listening on the iframe's load event
    ,listeners: {
        el: {
            load: function() {
                var iframe = this.dom,
                    iframeWindow = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument,
                    docEl = Ext.fly(iframeWindow.document),
                    body = docEl.down('body'); // instance of Ext.dom.Element

                // now you can do what you want with the iframe body!
                body.createChild({tag: 'div', html: 'I am bold', style: 'font-weight: bold;'})
            }
        }
    }
}]

创建子extjs iframe

1 个答案: