[HTML/Vue] iframe을 이용한 프로젝트 구성

💬 iframe(HTML Inline Frame) 이란

해당 웹 페이지 안에 다른 페이지를 불러와서 삽입할 수 있다.

 

📌  프로젝트 구성 방식

지금 진행하는 프로젝트는 main-proejct / dev-project 로 서비스를 나눠서 구성했다.

Main Project : 로그인, 메뉴, 사용자, 각 서비스 iframe 연결을 관리하는 프로젝트

Dev Project : 개발하는 화면을 관리하는 프로젝트 (iframe안에 들어감)

 

📌  프로젝트 실행

Main / Dev 프로젝트를 실행하고 (npm run serve)

Main Url로 접속한 후, Dev 서비스를 iframe으로 호출한다.

📌  Main Project의 Template

<template>
	<div class="h-100">
		<iframe ref="iframeRef" :name="name" :src="`${url}?${queryString}`" frameborder="0" class="w-100 h-100" @load="load"> </iframe>
	</div>
</template>

<script>
// ... 생략

computed: {
	queryString() {
    	const params = { ...this.iframeParam, ...this.screenParam };
        const str = Object.entries(params)
            .map(e => e.join('=')
            .join('&');
        return str;
    }
}

</script>

src에 Dev 서비스의 라우트를 넣어준다.

 

✅ name : iframe의 name

✅ url : iframe 호출 주소 (Dev-Project 주소)

✅ iframeParam : iframe에 태울 QueryString 객체

✅ screenParam : Menu 시슽메에서 사용중인 모든 iframe의 공통 QueryString 객체 (폰트,언어 등)

 

📌  프로젝트 실행

Main / Dev 프로젝트를 실행하고 (npm run serve)

Main Url로 접속한 후, Dev 서비스를 iframe으로 호출한다.

 

📌  프로젝트 구조

Main Url (Network) : http://xx.xx.xx.82:8081 

Dev Url (Network) : http://ee.ee.ee.82:3001 

메뉴를 누를 때마다 main은 동일하고, iframe안의 src만 변경되며 화면을 호출한다.

 

📌  Main/Dev 프로젝트의 routes

◼ Main Project의 routes.js 

const LoginLayout = () => import('@/views/Layout/Login/LoginLayout.vue');
const LoginPage = () => import('@/views/Pages/Login/LoginPage.vue');
const InitPasswordForm = () => import('@/views/Pages/Login/Content/InitPasswordForm.vue');
const ResetForm = () => import('@/views/Pages/Login/Content/ResetForm.vue');

const routes = [
	{
		path: '/',
		name: '',
		redirect: '/login',
		component: LoginLayout,
		children: [
			//로그인 페이지
			{
				path: '/login',
				name: 'Login',
				component: LoginPage
			},

			//비밀번호 초기화 페이지
			{
				path: '/initPassword',
				name: 'InitPassword',
				component: InitPasswordForm
			},

			//비밀번호 변경 페이지
			{
				path: '/reset',
				name: 'Reset',
				component: ResetForm
			}
		]
	},
];

export default routes;

 

◼ Dev Project의 routes.js 

// 기본 레이아웃
const DefaultLayout = () => import('@common/Layout/DefaultLayout');

// 모니터링 
const RealtimeCollectionStatus = () => import('@common/Monitoring/RealtimeCollectionStatus/RealtimeCollectionStatus.vue');
const AlarmHistory = () => import('@common/Monitoring/AlarmHistory/AlarmHistory.vue');


// 추가한 페이지 Route 정보
const children = [
	{
		path: '/RealtimeCollectionStatus',
		component: RealtimeCollectionStatus
	},
	{
		path: '/alarmHistory',
		component: AlarmHistory
	}
]

const routes = [
	{
		path: '/',
		component: DefaultLayout,
		children
	}
];

export default routes;