序文
この記事は主に会社のプロジェクト開発で個人が遭遇した問題を記録したものです 主な内容: vue プロジェクトの開発中、元の jsp ページとそれに関連する js および css をそのまま vue プロジェクトに移植する必要があります。
記事が曖昧な場合は ！
文章
起因
新しい vue プロジェクトの開発では、古いプロジェクトの主要なテクノロジーが使用されましたが、ant-design-vue ページを刷新するのは大変な作業でした。次に、次のような質問があります。
- vue プロジェクトはどのようにして表示 JSP ページにアクセスしますか?
- JSPページにJSとCSSをインポートするにはどうすればよいですか?
- JSPページの初期化に必要なパラメータを取得する方法と、元のAjaxリクエストをどのように処理するか?
iframe を使用して jsp/html ページを vue ページに埋め込む (質問 1 と 2 を解決する)
-
元の JSP ページ (ConfigurationEditing.html)、js、css、およびその他の関連リソースを vue プロジェクトの静的リソース フォルダーに配置します。
-
jspページに導入されているjsやcssなどはすべて変更する必要はありません（ただしパスの変更には注意し、ご自身のプロジェクトに合わせて調整してください）
-
対応する ConfigurationEditing.vue を src フォルダーに作成して、元の jsp/html ページを埋め込みます。次に、vue プロジェクトで対応するアクセス ルートを構成し、ConfigurationEditing.vue ページのコンテンツを表示します。
-
iframe コンポーネントが埋め込まれた jsp/html ページを 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>
vue と iframe コンテンツ間で値を渡す方法 (質問 3 を解決する)
1. postMessage(obj, ...)を使用してiframeに値を転送(通信)
- vue ページは値を 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, '*')
}
},
- iframe 内の jsp/html ページは、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()
}
})
})
- iframe の jsp/html は値を vue に渡します。
/**
* 图片上传
*/
$('#ssi-upload').click(function () {
var labelId = 1
var message = {
type: 'uploadClick',
labelId: labelId
}
window.parent.postMessage(message, '*') // 向vue传值
})
- Vue は 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. vue ページ上に vue インスタンスを作成し、それを window オブジェクトにマウントします。iframe に埋め込まれたページは、window.parent.vue インスタンスを通じて vue ページの値を取得します。(方法2)
- vue ページのコード: (vue ライフサイクルの作成時に vueThis インスタンスを作成します)
<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>
- 埋め込まれた jsp/html ページは、window.parent.vueThis を通じて vue で定義された変数と関数を取得できます: (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中函数
})
同様に、vue ページも iframe インスタンスを通じて値を取得したり、その中の関数を呼び出したりすることができます。
// 方法
iframeOK (res) {
var switchFrame = this.$refs['iframeDom']
var switchIframeWin = switchFrame.contentWindow // 获取到iframe窗口实例
switchIframeWin.StageObj.prototype.saveConfiguration(1) // 调用iframe中jsp/html页面定义的函数
},
その他の問題
1.埋め込み後はjspページのAjaxリクエストが正常に使えるようになりました！
注: リクエスト ヘッダー (例: トークン、ラングなど)、リクエスト パラメータ、リクエスト パスなど、ajax リクエスト内のリクエストに関連するパラメータの一部は、上記のメソッドを通じて取得できます。
2. JSP ページが vue ページに埋め込まれている場合、JSP ページを静的フォルダーに配置するときに、サフィックスを .html に変更します (.jsp の末尾は使用できません)。これは JSP ページには影響しません。
理由: ローカル vue プロジェクトの iframe に jsp ページを埋め込むことに問題はないようです。ただし、vue プロジェクトがサーバーにデプロイされる場合、jsp ページは静的フォルダーに保存されている静的リソースであるため、iframe を使用している場合、jsp ページはプレビューできず、静的ファイルとしてダウンロードされます。
解決策: iframe は画像、pdf、および html ファイル タイプをプレビューできるため、.jsp ファイルのサフィックスを .html サフィックスに変更し、サーバーにデプロイします。