Chromeウェブアプリのウェブビューの高さの問題

StefMa

Chromeウェブアプリのプログラミングは初めてです。Chrome / Chromiumに分離された(タブがないことを意味する)シンプルなWebAppが必要です。本体に外部のウェブサイトを表示するものとします。

だからここに私の設定があります:

マニフェスト.json

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 400,
      'height': 600
    }
  });
});

window.html:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <webview style="width: 100%; height: 100%;" src="http://www.google.de"></webview>
  </body>
</html>

私はこのようなウィンドウを期待していました(デモ用のChromiumを示しています): ここに画像の説明を入力してください

しかし、私はこれらを手に入れました:

ここに画像の説明を入力してください

したがって、webviewの高さは正しくありません。高さを(たとえば)192pxに設定すると、正しいサイズが表示されます。しかし、100%は機能していません...

StefMa

Google+でFrançoisBeaufort(Chromium engineer atm)に質問しましたちょっとリプレイ:

クロムチームはwindow.onresizeを使用して、このサンプルのWebビューの幅と高さを再計算します:https//github.com/GoogleChrome/chrome-app-samples/blob/master/samples/webview-samples/browser/browser.js

これらの例を見た後、私は次のChromeアプリを持っています。

マニフェスト.json:

{
  "name": "Hello World!",
  "description": "My first Chrome App.",
  "version": "0.1",
  "manifest_version": 2,
  "permissions": [ "webview" ],
  "icons": {
    "128": "icon_128.png"
  },
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    bounds: {
      'width': 1050,
      'height': 700
    }
  });
});

window.html

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      body {
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <webview src='http://www.google.de' id="xx"></webview>
    <script src="main.js"></script>
  </body>
</html>

main.js(ここに魔法があります:D)

function updateWebviews() {
  var webview = document.querySelector("webview");
  webview.style.height = document.documentElement.clientHeight + "px";
  webview.style.width = document.documentElement.clientWidth + "px";
};

onload = updateWebviews;
window.onresize = updateWebviews;

今、私はまさに私が欲しいものを持っています。Webページのフルスクリーンを含むWebビュー:ここに画像の説明を入力してください

編集:

また、GitHubにgitリポジトリをアップロードして、SourceCodeを確認しました:https//github.com/StefMa/ChromeAppWebsite

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

TOP 一覧

  1. 1

    セレンのモデルダイアログからテキストを抽出するにはどうすればよいですか?

  2. 2

    PictureBoxで画像のブレンドを無効にする

  3. 3

    Postmanを使用してファイル付きの(ネストされた)jsonオブジェクトを送信する

  4. 4

    テキストフィールドの値に基づいて UIslider を移動します

  5. 5

    Windows 10 Pro 1709を1803、1809、または1903に更新しますか?

  6. 6

    追加後、ブートストラップマルチセレクトがテーブルで機能しない

  7. 7

    MyBatisがネストされたオブジェクト属性を参照するとOgnlExceptionが発生します

  8. 8

    Ansibleで複数行のシェルスクリプトを実行する方法

  9. 9

    tf.nn_conv2dとtf.nn.depthwise_conv2dの違い

  10. 10

    Python / SciPyのピーク検出アルゴリズム

  11. 11

    PyCharmリモートインタープリターはプロジェクトタブにサイトパッケージのコンテンツを表示しません

  12. 12

    「埋め込みブラウザのOAuthログイン」を有効にしてコールバックURLを指定した後でも、Facebookのコールバックエラーが発生する

  13. 13

    Dynamics365からローカルファイルにアクセスできます。ローカルリソースは許可されていません

  14. 14

    STSでループプロセス「クラスパス通知の送信」のループを停止する方法

  15. 15

    Rパッケージ「AppliedPredictiveModeling」のインストール中にエラーが発生しました

  16. 16

    Chromeウェブアプリのウェブビューの高さの問題

  17. 17

    ZScalerと証明書の問題により、Dockerを使用できません

  18. 18

    C ++でのcURLとマルチスレッドの使用

  19. 19

    mutate_allとifelseを組み合わせるにはどうすればよいですか

  20. 20

    tkinterウィンドウを閉じてもPythonプログラムが終了しない

  21. 21

    java.lang.NoClassDefFoundError:com / sun / istack / tools / DefaultAuthenticator $ Receiver

ホットタグ

アーカイブ