iframe 在angular1.5中内嵌vue2.0的项目

最新推荐文章于 2022-11-17 16:57:01 发布

林墨欧宁

最新推荐文章于 2022-11-17 16:57:01 发布

阅读量903

点赞数

文章标签： vue.js javascript 前端 angular

本文链接：https://blog.csdn.net/m0_57271254/article/details/122100240

版权

公司项目的技术有一些老旧了，是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名字就好。

林墨欧宁

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
iframe 在angular1.5中内嵌vue2.0的项目

公司项目的技术有一些老旧了，是angular1.5的版本，需要做一些技术革新，希望在原有的项目上后续使用vue开发，并且合并两个项目，想了很久,决定使用iframe把vue的项目嵌进去。先说以下iframe这个标签，我也是从这次项目合并才了解的这个标签:iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。几乎所有的浏览器都支持iframe标签，自己写一个小demo即可明白：<body> <iframe src="https://www.csdn.net/
复制链接

扫一扫