出于自己的一个项目有iframe的需求,为了满足PC和Mobile都能兼容所以才有了这篇文章,其实非常非常简单,大概一个月没更新文章了,就打算用这个水一篇文章吧。

此次iframe不讨论跨域问题,所以直接上需求,目的就是解决不同客户端问题,起初为了适应客户端,我以为把iframe的‘width’和height设置为100%就完事了

<iframe src="https://xxx.com/" width='100%' heigth='100%'></iframe>

然而,这并没有什么卵用,哈哈哈哈,我太天真,学傻了。然后通过设置js来控制,还是没啥用…..

后来想了下通过css来控制,治不了源站还治不了你?最后成功制服。

css片段:

*{
				margin: 0;
				padding: 0;
			}
			html,
			body,
			iframe {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0
			}

			iframe {
				border: none;
			}

完整代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<title>test</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			html,
			body,
			iframe {
				width: 100%;
				height: 100%;
				padding: 0;
				margin: 0
			}

			iframe {
				border: none;
			}
		</style>
	</head>
	<body>
		<iframe id='myiframe' src='https://jkgblog.com/' frameborder='0' scrolling='0'></iframe>
	</body>
</html>

其实单独使用css还是不行,所以仔细想了想,既然是为了适应不同的客户端,那不就是响应式吗?那就加入响应式判断就行了啊,哈哈哈哈哈。

<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

快实习了,所以站点没怎么打理,溜了溜了…….


版权声明:

如未注明,均为原创,转载需注明出处!

本文链接:https://jkgblog.com/1133.html

最后修改日期:2020年8月10日

作者

留言

有跨域的教程吗?

话说是为啥需要用这玩意呢?

iframe是非常变态的一个东西,貌似还有一种解决办法用js….

撰写回覆或留言

发布留言必须填写的电子邮件地址不会公开。