欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

使用 iframe 显示手机移动页面的电脑网页

最编程 2024-04-05 13:39:31
...

缘起

想用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版了!

教训总结

遇事不要慌,不要病急乱投医,多看看官方文档,最简单的解决方案就在最基础的文档里面。