The software keyboard is abnormal when the vue-mathlive is embedded by the iframe #89
Comments
|
Can you provide a project demonstrating the issue? |
<!-- math-live.html -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<link rel="stylesheet" href="style.css" />
<title>MathLive with by iframe</title>
</head>
<style>
body {
font-family: sans-serif;
color: #444;
background-color: #f9f9f9;
}
main {
max-width: 820px;
margin: auto;
}
.mathfield {
border: 1px solid #ddd;
padding: 5px;
margin: 10px 0 10px 0;
border-radius: 5px;
background-color: #fff;
}
</style>
<body>
<script type="module">
import Vue from "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm.browser.js";
import * as MathLive from "https://unpkg.com/mathlive/dist/mathlive.mjs";
import MathfieldComponent from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs";
Vue.config.devtools = true;
Vue.use(MathfieldComponent, MathLive);
// The default tag for mathfields is <mathlive-mathfield>
// A custom tag can be defined using:
// ```Vue.component("custom-tag", Mathfield);```
new Vue({
el: "main",
data: {
formula: "",
keystroke: "",
},
methods: {
sayIt: (event) => {
// this.$refs.mathfield.executeCommand(["speak", "all"]);
},
setIt: (event) => {
// this.formula = "x=-b\\pm \\frac {\\sqrt{b^2-4ac}}{2a}";
},
ping: () => {
console.log("ping");
},
displayKeystroke: (keystroke, _ev) => {
this.keystroke = keystroke;
return true;
},
asSpokenText: function () {
return this.$refs.mathfield
? this.$refs.mathfield.getValue("spoken")
: "";
},
},
mounted,
});
async function mounted() {
this.$mathlive.renderMathInElement(this.$refs["static-math"]);
}
</script>
<main>
<h2>MathLive with by iframe</h2>
<mathlive-mathfield
id="mf"
ref="mathfield"
:options="{smartFence:false, virtualKeyboardMode:'onfocus'}"
@focus="ping"
:on-keystroke="displayKeystroke"
v-model="formula"
>f(x)=</mathlive-mathfield
>
<div ref="static-math">\[x^2 = x*x\]</div>
</main>
</body>
</html><!-- index.html -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- <title>MathLive with by iframe</title> -->
</head>
<body>
<div id="app">
<iframe src="./math-live.html" frameborder="0"></iframe>
</div>
</body>
</html> |
|
For the keyboard to be displayed in the parent document you must load the MathLive module in the parent document. |
<!-- index.html -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<!-- <title>MathLive with by iframe</title> -->
</head>
<body>
<div id="app">
<iframe src="./math-live.html" frameborder="0"></iframe>
</div>
</body>
<script type="module" src="">
import Vue from "https://cdn.jsdelivr.net/npm/vue/dist/vue.esm.browser.js";
import * as MathLive from "https://unpkg.com/mathlive/dist/mathlive.mjs";
import MathfieldComponent from "https://unpkg.com/mathlive/dist/vue-mathlive.mjs";
Vue.config.devtools = true;
Vue.use(MathfieldComponent, MathLive);
</script>
</html>I load the MathLive module in the parent document but the keyboard didn't displayed in the parent document,Can you provide a example or project |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When vue-mathlive is embedded by iframe, the keyboard does not display
The text was updated successfully, but these errors were encountered: