行いたいこと
Vue.jsで開発しているアプリで、Webviewで呼び出した外部サイトを、アプリのHeaderとFooterを考慮した位置に表示したい
Vue.jsでハイブリッドアプリを作っています。 cordovaを使う予定ですが、SP検証は、現段階ではChromeの開発者ツールで行なっているに留まっています。
このアプリで作成しているcomponentsのvueファイルでは、別に作成してあるFooterとHeaderの高さを考慮しています。
ある画面で、外部サイト (ここではgoogleとします)をWebviewにより表示する、という指定があります。
外部サイトを表示することはできたのですが、
View領域が外部サイトによって全て置き換えられてしまいます。
src/components/google.vue
vue.js
1<template> 2</template> 3<script src = '../assets/js/google.js'></script> 4--- 5
src/components/google.js
created() { var options = "top =40px, height = calc(100vh - 80px)" var ref = window.open("http://www.google.com", '_self', options) },
意図している外部サイトの位置、高さ
Header 40px 外部サイト calc(100vh - 80px) Footer 40px
横幅は100vwですので、特に指定はしていません。
optionsが効かないです。
ここで、外部Webの表示される領域を指定するという理解でいるのですが。
追記
pluginディレクトリは、
appSrc/plugins
/android.json
/ios.json
/fetch.json
/cordova-plugin-whitelist
となっています。
回答2件
あなたの回答
tips
プレビュー