因为业务需要，我们需要将手机端的网页在PC端进行嵌套，使PC端页面不太简单。通过直接将手机端网页嵌入到PC端会减少很多的开发工作，虽然可能PC端的界面会和手机端界面有些许不同，但是我们可以通过改变样式来达到我们的目的。下面两张图是手机端和PC端界面的样式。
手机端界面
红色框内为手机端网页，通过iframe嵌入到PC端
（一）改变iframe中手机端的样式
我需要改变手机端的样式，但是同时不能影响在手机端访问显示的界面。这里我们使用@media，@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。因为我们固定iframe的宽度为600px，一般手机屏幕的宽度是不会超过600px的，所以我们使用@media screen and (min-width:599px)，当屏幕宽度超过599px我就让它隐藏上方的状态选择栏和下方的新建按钮。
（二）postMessage的使用
点击父控制器的状态选择按钮，我们需要postMessage到iframe中，让iframe中的网页做出相对应的操作。比如我们点击新建按钮，我们在父控制器中执行以下代码:
var message = {
action: 'createNewApv',
type: currentType
};
$window.frames[0].postMessage(message,'*');
在iframe中执行的代码：
$window.addEventListener("message",function(event) {
执行代码；
}）；
postMessage时中的action用来区别发送的消息类别，然后在iframe添加监听，接收到消息并进行判断然后进行相对应的操作。
当页面刚开始初始化的时候postMessage给iframe页面会出现问题，就是iframe界面还没有初始化完成，还没有添加监听，所以会出现postMessage失败。我们通过延迟方法setTimeout(function() {
需要进行延迟的代码；
},time);
这样就能解决iframe没有接收到消息的问题了。
（三）$scope.$apply的使用
由于项目中用的是AngularJS，当接收到消息改变值绑定的时候，界面并不能实时改变，这是因为postMessage和addEventListener不是AngularJS的库的方法创建的，所以当他们调用AngularJS内部函数时，AngularJS并不知道数据有没有发生变化，所以我们需要用$scope.$apply将需要执行的代码包起来，命令AngularJS强制刷新自己的试图或者模型等。那么我们何时需要使用$scope.$apply呢？如果我们需要在一个新的执行序列中运行代码时才真正需要用到它，而且当且仅当这个新的执行序列不是被AngularJS的库的方法创建的，这个时候我们需要将代码用$scope.$apply包起来。
以上就是将手机端界面移植到PC端y用到的一些知识点。
网友评论