公司项目的技术有一些老旧了,是angular1.5的版本,需要做一些技术革新,希望在原有的项目上后续使用vue开发,并且合并两个项目,想了很久,决定使用iframe把vue的项目嵌进去。
先说以下iframe这个标签,我也是从这次项目合并才了解的这个标签:
iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。几乎所有的浏览器都支持iframe标签,自己写一个小demo即可明白:
<body>
<iframe src="https://www.csdn.net/" frameborder="1" class='myIf'></iframe>
<style>
.myIf{
height: 200px;
width:200px;
}
</style>
</body>
他的效果是这样的:
就是在页面中又嵌入了一个新的页面,iframe的src属性你新嵌入的页面的路径。
基于如此,我在我的angular代码中新建了一个vue的项目,这里说一下,angular的代码需要本地启动一个nginx服务,而vue则需要在本地启一个node服务,注意两个服务监听的端口不要重复了。
下面说怎么实现:
1 在angular的路由文件中加一个新的路由,使它的页面指向在angular中新建的一个页面,这个页面就是h5,中间只有一个标签,那就是我们万能的iframe,iframe的src指向你开的路由页面 :
<iframe src="http://localhost:8080/about" frameborder="1" id='main' scrolling="auto"></iframe>
这样就可以看到效果了;
2 我们指向了vue的页面,又发现了另一个问题,那就是我们的内嵌页面并不能自适应,这没关系:
function adjustIframe() {
var ifm = document.getElementById("main");
ifm.height = document.documentElement.clientHeight;
ifm.width = document.documentElement.clientWidth;
}
这段代码能保证我们的自适应,把id名字换成你想要的id名字就好。