Javascript VueJS：将 div 内容绑定到 iframe src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43686229/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS: Bind div content to iframe src
提问by Alyssa Reyes
I have this pdf embedded on my Vue file, but I want to get the content from a div where I define the html table:
我在我的 Vue 文件中嵌入了这个 pdf，但我想从我定义 html 表的 div 中获取内容：
<template>
<div id="editor"> HTML TABLE HERE </div>
<iframe :src="iframe.src" type="application/pdf" width="100%"
height="650" frameborder="0" style="position:relative;z
index:999" ref="frame" @load="load" v-show="iframe.loaded">
</iframe>
</template>
<script>
export default {
data() {
return {
iframe: {
src: '', //DIV HERE #EDITOR
loaded: false
}
}
},
methods: {
load: function(){
this.iframe.loaded = true;
}
}
}
</script>
Is this possible?
这可能吗？
回答by thanksd
It is possible! The iframe's srcattribute takes in a URL address and will try to load the whole page. So, instead of trying to pass it any kind of reference to the editor div, pass it the current URL via window.location.href.
有可能的！iframe 的src属性接受一个 URL 地址并尝试加载整个页面。因此，与其尝试将任何类型的引用传递给编辑器 div，不如通过window.location.href.
Then, by setting a refattribute on the editor div, you can reference it in your mountedlifecycle hook and get it's position and dimension. Once you have that, you can style the iframe and a wrapper div to only show contents of the `editor.
然后，通过ref在编辑器 div 上设置一个属性，您可以在mounted生命周期挂钩中引用它并获取它的位置和尺寸。一旦你有了它，你就可以设置 iframe 和包装器 div 的样式以只显示`editor 的内容。
Here's the whole thing (and a codepen):
这是整个事情（和一个codepen）：
<template>
<div id="app">
<div id="editor" ref="editor">HTML TABLE HERE</div>
<div
id="iframe-wrapper"
:style="iframe.wrapperStyle"
>
<iframe
v-if="loaded"
:src="iframe.src"
:style="iframe.style"
:height="iframe.style.height"
:width="iframe.style.width"
type="application/pdf"
frameborder="0"
></iframe>
</div>
</div>
</template>
<script>
export default {
data() {
return {
loaded: false,
iframe: {
src: window.location.href,
style: null,
wrapperStyle: null,
}
}
},
mounted() {
let editor = this.$refs.editor;
this.iframe.style = {
position: 'absolute',
width: window.innerWidth,
height: window.innerHeight,
top: -editor.offsetTop + "px",
left: -editor.offsetLeft + "px",
}
this.iframe.wrapperStyle = {
overflow: 'hidden',
height: editor.clientHeight + "px",
width: editor.clientWidth + "px",
}
this.loaded = true;
}
}
</script>
