1.4.15 • Published 3 years ago
i-vue-frame v1.4.15
i-vue-frame
An iframe Solution compatible Vue 2.x and Vue 3.x
install
npm i i-vue-frame
# or
yarn add i-vue-frame
init
import iVueFrame from "i-vue-frame";
Vue.use(iVueFrame);
sample use
<template>
<i-vue-frame width="100%" height="100%" :css="styles" src="http://localhost:8080/example" />
</template>
<script>
export default {
data() {
return {
styles: {
aside: "display: none !important;",
header: "display: none !important;"
}
};
}
};
</script>
frame onload
<template>
<i-vue-frame @onload="frameOnloadHook" src="http://localhost:8080/example" />
</template>
<script>
export default {
methods: {
frameOnloadHook(iframe) {
console.log(iframe);
}
}
};
</script>
post-message
use post-bridge
get message from iframe ( send message in iframe )
<template>
<i-vue-frame @emit="emitMessage" src="http://localhost:8080/example" />
</template>
<script>
// in Parent Page
export default {
methods: {
emitMessage(data = {}) {
console.log("Get Message from iFrame", data);
}
}
};
</script>
in iFrame, send
emit:message
bypost-bridge
<template>
<button @click="sendMessageToPage">Send Message to Page</button>
</template>
<script>
import { send } from "i-vue-frame/api";
export default {
methods: {
sendMessageToPage() {
send({ key: "sendMessageToPage" });
}
}
};
</script>
send message to iframe
send message to iframe with namespace
emit:custom
<template>
<button @click="sendMessageToIframe">Send Message to iFrame</button>
<!-- set id on i-vue-frame -->
<i-vue-frame id="customFrame" src="http://localhost:8080/example" />
</template>
<script>
import { send } from "i-vue-frame/api";
export default {
methods: {
sendMessageToIframe() {
// get frame object by id
const frame = document.getElementById("frame");
send({ key: "sendMessageToIframe" }, "emit:custom", frame);
}
}
};
</script>
receive message from page with namespace
emit:custom
<script>
import { receive } from "i-vue-frame/api";
export default {
mounted() {
receive(data => console.log(data), "emit:custom");
}
};
</script>
!! Cross Domain with Styles
Add These Code in iFrame
// Import Receive
import { sheet } from "i-vue-frame/api";
// Use Receive
sheet((data, { addCss }) => {
for (const selector in data) {
addCss(selector, data[selector]);
}
});
1.4.15
3 years ago
1.4.14
3 years ago
1.4.13
3 years ago
1.4.6
3 years ago
1.4.5
3 years ago
1.4.9
3 years ago
1.4.11
3 years ago
1.4.8
3 years ago
1.4.10
3 years ago
1.4.7
3 years ago
1.4.12
3 years ago
1.4.4
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.3.2
3 years ago
1.4.0
3 years ago
1.3.1
3 years ago
1.2.7
3 years ago
1.2.6
3 years ago
1.2.5
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago