質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

3448閲覧

Vue.js モーダルの中のiframe内ボタンからモーダルを閉じたい

nana7777

総合スコア7

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

iframe

HTMLのタグ<iframe>です。<iframe>は、ドキュメント内に""inline frame""を作るHTML要素で、同じページでセパレートしているドキュメントが表示されるようにします。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/01/17 16:29

編集2022/01/12 10:55

メインのhtmlファイルでモーダルのコンポーネントを開き、コンポーネント内ではiframeで外部ファイルを表示させるようにしています。

html

1<!-- main.html --> 2<div v-if="showInnerModal"> 3 <div class="modal-overlay"> 4 <modal iframe-path="./text.html" iframe-width="620" iframe-height="375" iframe-class="d-border-r4" v-on:from-modal-alert="closeModalAlert" v-on:from-modal="closeModal"></modal> 5 </div> 6</div>

javascript

1 2// modal.vue 3<template> 4 <div class="modal-content"> 5 <iframe 6 :src="modalItemPath" 7 :width="modalItemWidth" 8 :height="modalItemHeight" 9 :class="modalAddClass" 10 frameborder="0" 11 ></iframe> 12 </div> 13</template> 14 15<script> 16export default { 17 props: { 18 iframePath: { 19 type: String, 20 default: "" 21 }, 22 iframeWidth: { 23 default: 1020 24 }, 25 iframeHeight: { 26 default: 630 27 }, 28 iframeClass: { 29 type: String, 30 default: "" 31 } 32 }, 33 data() { 34 return { 35 modalItemPath: this.iframePath, 36 modalItemWidth: this.iframeWidth, 37 modalItemHeight: this.iframeHeight, 38 modalAddClass: this.iframeClass 39 }; 40 } 41}; 42</script> 43

javascript

1 2// main.js 3import ModalTemplate from '../components/modal.vue' 4 5new Vue({ 6 el: '#app', 7 components: { 8 'modal': ModalTemplate 9 }, 10 data() { 11 return { 12 showInnerModal: false 13 } 14 }, 15 methods: { 16 closeModalAlert: function(e) { 17 if (!confirm('画面を閉じても良いですか?')) { 18 e.preventDefault(); 19 return; 20 } 21 this.showInnerModal = false 22 }, 23 closeModal: function() { 24 this.showInnerModal = false 25 }, 26 closeFromModalAlert: function() { 27 this.$emit('from-modal-alert') 28 }, 29 closeFromModal: function() { 30 this.$emit('from-modal') 31 } 32}) 33

html

1 2<!-- iframe内で呼び出しているhtml --> 3<div class="buttons"> 4 <button type="button" v-on:click="closeFromModalAlert">キャンセル</button> 5 <button type="button" v-on:click="closeFromModal">完了</button> 6 </div>
closeFromModalAlert: function() { this.$emit('from-modal-alert') }, closeFromModal: function() { this.$emit('from-modal') }

ここで$emitを使って親側のmain.htmlに通知しているのですが、この場合、子コンポーネント内のiframeで読み込んでいるhtmlファイルからの操作は孫からになるのでしょうか??

もし孫となる場合は
https://qiita.com/tosite0345/items/4c90156883135fac880f
こちらのような方法をとるべきですか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問