在 iFrame 中调整视口大小
我正在尝试在 Sencha 中创建一个显示 iframe 的 Carrousel。
基本思想是我已经配置了一堆 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的内部没有像这样缩小它是应该是。有什么想法吗？
I'm trying to create a Carrousel in Sencha which displays iframes.
The basic idea is that I have a bunch of HTML files already configured to be viewed on an iPad.
So the files have a viewport and everything configured.
I created a simple carrousel like this :
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">' },
]
});
}
});
The HTML files themselves look like this :
<!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>
The system sort of works, except that the viewport is not respected and the inside of the iframe is not zoomed out like it's supposed to be. Any idea ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我不熟悉 sencha，但 iframe 无法将高度设置为百分比（100%）。因此，如果 sencha 将宽度和高度设置为 100%，它不会垂直扩展，但应水平填充父级。
这是你看到的吗？
尝试手动将 iframe 的高度设置为足够大的尺寸（以 px 为单位）。如果您可以控制 iframe 的内容，那么您可以添加一些 JavaScript 来与父级通信并告诉它适当地调整大小。
I'm not familiar with sencha, but iframes don't have the ability to set height to a percentage (100%). So if sencha is setting the width and height to 100%, it won't expand vertically, but should fill the parent horizontally.
Is this what you see?
Try setting the iframe's height manually to a large enough size in px. If you have control of the iframe's content, then you can add a bit of javascript to communicate with the parent and tell it to resize appropriately.
在 iframe 和内部 html 上设置 100%
并且你的 css 链接是这样的。
Set 100% on iframe and inner html
And you css be link something like this.