Extjs 4.2.1 iframe 大小问题

Posted 2023-02-26

【中文标题】Extjs 4.2.1 iframe 大小问题

【英文标题】：Extjs 4.2.1 Iframe size issue

【发布时间】：2020-07-10 15:32:45

【问题描述】：

我正在尝试在容器内渲染 iframe，但 iframe 没有被拉伸到全屏。

var htmlInputs = '<input type="hidden" name="amount" value="100.00">' +
            '<input type="hidden" name="currency" value="AUD">';
       
html: '<iframe scrolling="yes" name="iframe" src="" style="overflow:visible; display:block; position:relative; width=100%; height=100%;"  id="iframe"></iframe>' +
                '<form style="float:right;display:none;" method="post" target="ifrmae" id="ingenicoForm" name=iframeaction="https://*********">' +
                htmlInputs +
                '</form>' ,
            xtype: 'container',
            listeners: 
                afterrender: function() 
                    var form = Ext.getElementById('iframe');
                    form.submit();
                
     

Iframe 在页面的一个角落呈现，如所附图像所示。我想让这个 iframe 拉伸整个屏幕。

我尝试了很多东西，但仍然无法正常工作， 如有任何帮助，我们将不胜感激。

Attached Image

【问题讨论】：

height=100%: id="iframe">'

更正了同样的问题......它在主容器中的呈现。并在一个角落渲染。

【参考方案1】：

Ext.application(
    name: 'Fiddle',

    launch: function () 
        var htmlInputs = '<input type="hidden" name="amount" value="100.00">' +
            '<input type="hidden" name="currency" value="AUD">';
        Ext.create('Ext.container.Container', 
            layout: 'fit',
            html: '<iframe scrolling="yes" name="iframe" src="" style="overflow:visible; display:block; position:relative; width: 100%; height: 100%; border: 5px solid red;"  id="iframe"></iframe>' +
                '<form style="float:right;display:none;" method="post" target="ifrmae" id="ingenicoForm" name=iframeaction="https://*********">' +
                htmlInputs +
                '</form>',
            listenersss: 
                afterrender: function () 
                    var form = Ext.getElementById('iframe');
                    form.submit();
                
            ,
            width: 200,
            height: 300,
            style: borderColor:'#000000', borderStyle:'solid', borderWidth:'5px',
            renderTo: Ext.getBody()
        )
    
);

【讨论】：

'' + 无效

我已经编辑了帖子。它有效..你的环境有问题..

嗨亚瑟，您的解决方案正在运行，但我怎样才能使容器宽度和高度为 100%，以便它覆盖屏幕。如果我给出 100% 的宽度和高度，它不会拉伸。

您可以使用视口。