Recent development of the project uses a nested assembly Vue iframe, the respective components and communication problems encountered in the HTML, the following scenario: demo.vue embedded test.html
Due to the general iframe nesting is for the HTML file, when vue vue file we need to register a global approach in an iframe to trigger an event, you can back to the assembly vue
demo.vue the main code:
<template>
<iframe ref="iframe" src='test.html'> </iframe>
</template>
<script>
export default {
data() {
return {
spanClick : ' handleSpanClick ' // HTML events requiring a response
}
},
created() {
let _this = this
window[this.spanClick] = (params) => {
_this.doSomeThing(params)
}
},
methods: {
doSomeThing(params){
//all
}
}
}
</script>
test.html the main code;
<div>
<span onclick="handleTest(this)">test</span>
</div>
<script>
function handleTest(event) {
window.parent['handleSpanClick'](event.innerText)
}
<script>
Sometimes, we need to pass parameters from html vue assembly, a relatively simple method is to do the stitching in src iframe, For chestnuts, we need to pass a json to HTML in the vue
data = {
id: 1,
name: 'will'
}
This time the src = 'test.html?' + EncodeURIComponent (JSON.stringify (data)) // encodeURIComponent to use when parameter passing parameters to prevent garbled bit encryption
Need to be decoded in respective test.html in:
JSON.parse(decodeURIComponent(window.location.search.slice(1)))