1

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

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

将页面views.py呈现在htmliframe 

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

我想Ext.fly("")在 iframe 的 html 页面上添加一些东西（createchild）。

可能吗？如何？

4

1 回答 1

0

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

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

// 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)or 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;'})
            }
        }
    }
}]
于 2013-06-11T12:01:43.927 回答