PC Web中用iframe显示手机移动端页面
2020-10-16 本文已影响0人
紫石南
缘起
想用iframe在web页面挂一个有道翻译的手机端页面,网上找到个样列代码,在里面把地址换成我要的https://m.youdao.com
,完美显示!
于是拷贝出来自己用,结果就不那么完美了!
嵌入的内容显示成了web版的,通过调试工具发现是有道自己做了转发,应该是根据请求环境返回不同的页面。
接下来就靠搜索引擎一顿瞎猜,找了很多解决方案,有说加header的,有说改样式的,有说模拟环境的,结果都不行。
解决方案
直接在iframe加sandbox="allow-same-origin allow-forms"
属性。
<iframe src="https://m.youdao.com/" sandbox="allow-same-origin allow-forms" seamless width="280" height="653" frameborder="0" name="youdaoFrame"></iframe>
注意
如果加了allow-scripts属性,会失效,又加载成web版了!
教训总结
遇事不要慌,不要病急乱投医,多看看官方文档,最简单的解决方案就在最基础的文档里面。