需求是这样的: 客户要求做一个页面,这个页面由两部分组成: 上部分是一个 iframe ,嵌入到是微信公众平台内的一篇文章; 下部分是固定的信息,比如联系方式、联系人。 这个页面可以由客户分享到微信朋友圈。
源码如下:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>信达旅游</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
</head>
<body>
<div class="scroll-wrapper">
<iframe id="frame_main" src="http://mp.weixin.qq.com/s?__biz=MjM5NjgyMTY4OA==&mid=205144298&idx=1&sn=5c697af17b4ccb932cb5f694b7f1200f&scene=1&srcid=05066y4npBelHqZZhk548mzZ&from=singlemessage&isappinstalled=0">
</iframe>
</div>
<div class="content">
<p id="channel_name">联系人:韩雄文</p>
</div>
<style scoped>
.scroll-wrapper {
position: fixed;
right: 0;
bottom: 10%;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
overflow-x: hidden;
}
.scroll-wrapper iframe {
height: 100%;
width: 100%;
frameborder="0";
}
.content{
text-align:center;
position: fixed;
right: 0;
bottom: 0;
left: 0;
top: 90%;
}
</style>
</body>
</html>
现在唯一的问题是:嵌入到 iframe 内的微信公众平台文章的图片加载不出来。 请高手指教~
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.