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

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

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

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

JavaScript

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

Q&A

解決済

2回答

3366閲覧

Webviewで表示される外部サイトの領域を指定したい

yzmw131321

総合スコア25

Vue.js

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

JavaScript

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

0グッド

0クリップ

投稿2018/07/03 16:22

編集2018/07/04 09:14

行いたいこと

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

となっています。

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

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

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

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

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

oikashinoa

2018/07/03 23:17

ハイブリッドアプリって何で作っていますか?cordova ,monaca etc 質問内容に追記して下さいね。
oikashinoa

2018/07/03 23:19 編集

あと、全体のソースを載せたほうが良いですよ。ほかのところで間違えいるかもしれないし、人が試して調べやすくなります。結果的に回答が付きやすいと思います
oikashinoa

2018/07/04 00:41

あと、追加でプラグイン入れているなら記載して下さいね。window.openの挙動を変えるものがあります。
guest

回答2

0

自己解決

iframeでできました。 

Google.vue

1<template> 2 <div class="content_wapper"> 3 <!-- Googleフレーム --> 4 <div class="iframe-content"> 5 <iframe src="https://www.google.com/" class="frame"></iframe> 6 </div> 7 </div> 8</template>

iframe領域のスタイリングは、cssで簡単にできました。

投稿2018/07/04 09:12

yzmw131321

総合スコア25

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

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

oikashinoa

2018/07/04 09:31

iframeだと表示出来ない可能性が有りますよ。 アクセス先がiframe禁止したらアウトです。お仕事ならアクセス先がお客様のサイトなら許可してもらえるかもですが https://teratail.com/questions/43453
guest

0

cordovaのwebviewは、フルスクリーン状態のウインドウなのだと思います。(ツッコミお待ちしてます)
その状態でウインドウのサイズ指定しても無効になっているのでは?

ソースやプラグインが提示があると他の要因も考えられるかな?

投稿2018/07/04 00:46

oikashinoa

総合スコア2826

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

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

yzmw131321

2018/07/04 05:27

ご回答ありがとうございます。 社内の開発で行なっているため、ソースを全て共有することはできない点、ご了承ください。 サイズ指定ができるプラグインをご存知なのであれば、教えていただけるとありがたいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問