logo标签列表

iFrame 中的视口调整

iframemobileextjsviewport
7

我正在尝试在Sencha中创建一个显示iframe的轮播图。
基本想法是我已经配置了一堆HTML文件，以便在iPad上查看。
所以这些文件都有一个视口和所有配置好的内容。

我创建了一个简单的轮播图如下：

var rootPanel;
Ext.setup({
    onReady: function() {
        rootPanel = new Ext.Carousel({
            fullscreen: true,
            layout: 'card',
            items: [
                { html: '<iframe src="http://localhost/file1.html">' },
                { html: '<iframe src="http://localhost/file2.html">' },
                { html: '<iframe src="http://localhost/file3.html">' },
            ]
        });
    }
});

HTML文件本身长这样：
<!DOCTYPE html>
  <html>
    <head>
        <title>Untitled Page</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width; initial-scale=0.5; minimum-scale=0.5; maximum-scale=1.0;user-scalable=no">
    </head>
    <body>
        <div id="container">
            <div style="margin:0;padding:0;position:absolute;left:0px;top:0px;width: 1536px; height: 2048px;text-align:left;z-index:0;">
                <img src="image.jpg" style="width: 1536px; height: 2048px;"></div>
        </div>  
    </body>
</html>

系统基本可以工作，但视口没有得到尊重，iframe内部也没有像应该那样缩小。有什么想法？
请标记为已回答。这将在所有未回答问题的搜索中弹出。 - Dinkheller
2个回答
0

将 iframe 和内部 html 设置为 100%

var rootPanel;
Ext.setup({
    onReady: function() {
        rootPanel = new Ext.Carousel({
            fullscreen: true,
            layout: 'card',
            cls: 'some-cards',
            items: [
                { html: '<iframe width="100%" height="100%" src="http://localhost/file1.html">' },
                { html: '<iframe width="100%" height="100%" src="http://localhost/file2.html">' },
                { html: '<iframe width="100%" height="100%" src="http://localhost/file3.html">' },
             ]
        });
    }
});

你可以像这样链接你的CSS。

.some-cards .x-innerhtml {
    height: 100%;
}
0

我不熟悉sencha，但是iframes没有设置高度为百分比（100%）的能力。所以如果sencha将宽度和高度设置为100％，它不会垂直扩展，但应该水平填充父级。

这是你看到的吗？

尝试手动将iframe的高度设置为足够大的像素大小。如果您可以控制iframe的内容，则可以添加一些javascript与父级通信，并告诉它适当地调整大小。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接