создать ребенка extjs iframe

Question

Я работаю с django и extjs. Я создать HTML страницу в ExtJS IFrame так

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

views.py отобразить страницу HTML в IFRAME

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

Я хочу использовать Ext.fly ("") что-то добавить (CreateChild) на странице html в iframe. Является ли это возможным? как?

Answer 1

Конечно, все следующее предполагает, что IFrame загружается из одного домена (такая же политика происхождения); но, учитывая ваш пример, похоже, так оно и есть. Если вы загружаете свой IFrame из другого домена, браузер будет препятствовать вам практически любому взаимодействию (вы можете изменить хэш ...).

Итак, во-первых, вам нужно получить ссылку на элемент DAMF DOM (в отличие от элемента Ext). Затем, вы можете получить ссылку на document объект IFrame в этом пути (украденный из 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;'}) 
      } 
     } 
    } 
}]