foreword
This article mainly records the problems encountered by individuals in the company's project development. The main content: During the development of the vue project, the original jsp page and its associated js and css need to be transplanted into the vue project intact.
If the article is ambiguous, please point it out to avoid misleading more people! !
text
origin
In the development of the new vue project, the key technology of the old project was used; it was too much work to renovate the ant-design-vue page! Then there are the following questions:
- How does the vue project access the display jsp page?
- How to import js and css in jsp page?
- How to obtain the parameters required for jsp page initialization, and how to deal with the original Ajax request?
Use iframe to embed jsp/html pages in vue pages (solve questions 1 and 2)
-
Put the original jsp page (ConfigurationEditing.html), js, css and other related resources into the static resource folder of the vue project:
-
All the js, css, etc. introduced in the jsp page do not need to be changed: (but pay attention to the change of the path, and adjust it according to your own project)
-
Create the corresponding ConfigurationEditing.vue in the src folder to embed the original jsp/html page. Then configure the corresponding access route in the vue project to display the content of the ConfigurationEditing.vue page.
-
Create iframe component embedded jsp/html page in ConfigurationEditing.vue:
<template>
<div>
<iframe
name="iframeChild"
id="configFrame"
src="/jsp/ConfigurationEditing.jsp"
width="100%"
height="800px"
frameborder="0"
scrolling="no"
ref="iframeDom"
></iframe>
<upload-material-modal ref="uploadModal" @konvaOk="konvaOk"></upload-material-modal>
</div>
</template>
How to pass values between vue and iframe content (solve question 3)
1. Use postMessage (obj, ...) to transfer values to the iframe (communication)
- The vue page passes the value to the iframe:
methods: {
konvaOk () {
var param = {
type: 'uploadOk'
}
this.sendMesForIframe(param)
},
// 获取iframe实例, postMessage传值
sendMesForIframe (value) {
const mapFrame = this.$refs['iframeDom']
const iframeWin = mapFrame.contentWindow
iframeWin.postMessage(value, '*')
}
},
- The jsp/html page in the iframe receives the value passed by vue:
$(function () {
// 监听vue页面传递过来的值
window.addEventListener('message', messageEvent => {
// 判断是不是父窗口传来的值
if (messageEvent.source !== window.parent.window.parent) return
console.log(messageEvent.data,'vue页面所传的值')
if (messageEvent.data.type === 'uploadOk') {
// 判断传来值的类型后执行其他函数
resetModalMaterialList()
}
})
})
- jsp/html in iframe passes value to vue:
/**
* 图片上传
*/
$('#ssi-upload').click(function () {
var labelId = 1
var message = {
type: 'uploadClick',
labelId: labelId
}
window.parent.postMessage(message, '*') // 向vue传值
})
- Vue receives the value passed by iframe:
mounted: function () {
var that = this
window.addEventListener('message', function (e) {
var message = e.data
console.log(message, 'iframe传递过来的数据')
if (message.type === 'uploadClick') {
var labelId = message.labelId
console.log(labelId)
}
})
},
2. Create a vue instance on the vue page and mount it on the window object. The page embedded in the iframe gets the value of the vue page through the window.parent.vue instance. (method 2)
- The code of the vue page: (create a vueThis instance when the vue life cycle is created)
<script>
export default {
name: 'ConfigurationEditing',
data () {
return {
lang: Vue.ls.get(APP_LANGUAGE), // 请求的语言zh -CN
reqPath: process.env.VUE_APP_API_BASE_URL_NEW, // 用于内嵌jsp页面的Ajax的路径
regionId: 1
}
},
methods: {
showID (id) {
console.log(id)
}
},
// 计算属性
computed: {
...mapState({
userToken: (state) => state.user.token // 计算属性也可以被内嵌的jsp/html获取
})
},
created () {
window.vueThis = this // 挂载vue实例
}
}
</script>
- The embedded jsp/html page can get the variables and functions defined in vue through window.parent.vueThis: (Get the value from vue)
$(function () {
var lang = window.parent.vueThis.lang
var rePath = window.parent.vueThis.rePath
var regionId = window.parent.vueThis.regionId
var userToken = window.parent.vueThis.userToken // 获取到的token可以用于内嵌的jsp/html页面的ajax请求头中
window.parent.vueThis.showID(regionId) // 调用vue中函数
})
Similarly, the vue page can also get the value or call the function in it through the iframe instance:
// 方法
iframeOK (res) {
var switchFrame = this.$refs['iframeDom']
var switchIframeWin = switchFrame.contentWindow // 获取到iframe窗口实例
switchIframeWin.StageObj.prototype.saveConfiguration(1) // 调用iframe中jsp/html页面定义的函数
},
other problems
1. After embedding, the Ajax request of the jsp page can be used normally!
Note: Some relevant parameters of the request in the ajax request can be obtained through the methods described above, such as: request header (eg: token, lang, etc.), request parameters, and request path.
2. When the jsp page is embedded in the vue page, when the jsp page is placed in the static folder, change the suffix to .html (the end of .jsp cannot be used); it has no effect on the jsp page!
Reason: There seems to be no problem with embedding jsp pages in the iframe of the local vue project! But when the vue project is deployed to the server, because the jsp page is a static resource stored in a static folder, the jsp page cannot be previewed when using iframe but downloaded as a static file.
Solution: iframe can preview image, pdf, and html file types, so change the .jsp file suffix to .html suffix and deploy it to the server.