A tool for embedding iframe and iframe communication
let embed = EmbedIframe.init(options, selector)
-
selector
:插入元素选择器或DOM,可选,默认为:.ctg-embed
-
options
:-
url
:协同页面URL -
height
:页面高度 minHeight
maxHeight
-
内嵌协同的父框架的EmbedIframe实例,可使用 API 和 Events
embed.destory()
embed.load(options)
embed.emit(event, value)
embed.on(event, function(value){})
embed.onLoad(event, function(){})
embed.onError(event, function(){})
返回页面高度
embed.onReady(event, function({height}){})
<template>
<div>
<div class="embed-iframe"></div>
<button @click="onClick">button</button>
</div>
</template>
<script>
import EmbedIframe from 'embed-iframe'
export default {
data() {
return {
embed: null
}
},
mounted() {
this.embed = EmbedIframe.init({ url: "http://xxx" })
this.embed.onLoad(() => {
this.embed.emit("message", "iframe loaded")
})
this.embed.on('form:submit', () => {
console.log('form:submit')
})
},
methods: {
onClick() {
this.embed.emit("message", "send some message to iframe")
}
}
}
</script>
<template>
<div>
<button @click="onClick('form:submit')">button</button>
</div>
</template>
<script>
import EmbedIframe from 'embed-iframe'
export default {
mounted() {
EmbedIframe.parent.on("message", value => {
console.log(value)
})
},
methods: {
onClick(event) {
EmbedIframe.parent.emit(event)
}
}
}
</script>