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

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

ただいまの
回答率

90.34%

  • JavaScript

    17512questions

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

  • Vue.js

    838questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 178

yzmw131321

score 8


行いたいこと

Vue.jsで開発しているアプリで、Webviewで呼び出した外部サイトを、アプリのHeaderとFooterを考慮した位置に表示したい

Vue.jsでハイブリッドアプリを作っています。 cordovaを使う予定ですが、SP検証は、現段階ではChromeの開発者ツールで行なっているに留まっています。
このアプリで作成しているcomponentsのvueファイルでは、別に作成してあるFooterとHeaderの高さを考慮しています。
ある画面で、外部サイト (ここではgoogleとします)をWebviewにより表示する、という指定があります。

外部サイトを表示することはできたのですが、
View領域が外部サイトによって全て置き換えられてしまいます。


src/components/google.vue

<template>
</template>
<script src = '../assets/js/google.js'></script>
---


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

となっています。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • oikashinoa

    2018/07/04 08:17

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

    キャンセル

  • oikashinoa

    2018/07/04 08:17 編集

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

    キャンセル

  • oikashinoa

    2018/07/04 09:41

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

    キャンセル

回答 2

check解決した方法

0

iframeでできました。 

<template>
  <div class="content_wapper">
    <!-- Googleフレーム -->
    <div class="iframe-content">
      <iframe src="https://www.google.com/" class="frame"></iframe>
    </div>
  </div>
</template>


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/04 18:31

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

    https://teratail.com/questions/43453

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/04 14:27

    ご回答ありがとうございます。
    社内の開発で行なっているため、ソースを全て共有することはできない点、ご了承ください。

    サイズ指定ができるプラグインをご存知なのであれば、教えていただけるとありがたいです。

    キャンセル

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

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17512questions

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

  • Vue.js

    838questions

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