Onsen UI でiframeでwebページを表示するとiosで正しくwidthが適用されない

Question

前提・実現したいこと

• onsen-uiでwebページを表示したい

発生している問題・エラーメッセージ

• iframeでwebページを表示すると、おそらくiosでのみwidth: 100%が効かなく、横スクロールが発生してしまう
• 同じ現象が発生しているもの => [【Monaca】Onsen UIの画面内に外部Webページを表示する

](http://hatopp.wpblog.jp/archives/1297)

• chromeのディベロッパーツール上で横にはみ出さずに表示される

理想	実際

該当のソースコード

import React from 'react';
import {Page, Toolbar,BackButton} from 'react-onsenui';


class Browser extends React.Component {

    renderToolbar = () => {
        return (
            <Toolbar>
                <div className='left'>
                <BackButton>戻る</BackButton>
                </div>
            </Toolbar>
        );
        }

  render () {

    return (
      <Page renderToolbar={this.renderToolbar}>
        <div className="c-browser__iframe__wrapper">
          <iframe
            className="c-browser__iframe"
            src="https://www.hotpepper.jp/strJ000063796/"
          />
        </div>
      </Page>
    );
  }
}

export default Browser

.c-browser__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.c-browser__iframe__wrapper {
  display: inline-block;
  height: 100%;
  width: 100%;
  overflow: auto;
}

試したこと

• 【CSS】iOS（iPhone）でiframeが伸びないようにする方法などを参考にして見たが、解決せず

Answer 1

• @bi_tsuさんの回答をReactで再現することで理想の画像のようにすることができました
• 外部サイトをツールバーなどを残して表示させたい。
• Chromeのディベロッパーツールで見ると正しく表示されませんが、実機では正しく表示されました

import React from 'react';
import ons from 'onsenui';
import {Page, Toolbar,BackButton, } from 'react-onsenui';


class Browser extends React.Component {

  constructor(props) {
    super(props);

    const isIOS = ons.platform.isIOS();

    this.state = {
      width: window.innerWidth,
      height: isIOS ? '' : '100%',
      scrolling: isIOS ? 'no' : 'yes',
    }
  }

    renderToolbar = () => {
        return (
            <Toolbar>
                <div className='left'>
                <BackButton>戻る</BackButton>
                </div>
            </Toolbar>
        );
        }

  render () {

    const {
      width,
      height,
      scrolling,
    } = this.state;

    return (
      <Page renderToolbar={this.renderToolbar}>
          <iframe
            id="browser-iframe"
            className="c-browser__iframe"
            src="https://www.hotpepper.jp/strJ000063796/"
            width={width}
            height={height}
            scrolling={scrolling}
          />
      </Page>
    );
  }
}

export default Browser

Answer 2

私も同じ内容で困っていました。AngularJSを使用していましたので違いはありますが。
→参考

JS側でデバイスの画面の幅を取得し、それをiframeの横幅に当てはめることで解決しましたがいかがでしょうか。
reactでウィンドウサイズの取得
iosの場合は横幅だけでよいのですが、androidの場合は縦幅も決めないと表示がうまくいきませんでした。

Comments

[mikan3rd]

回答ありがとうございます

iframeのwrapperの方にサイズを指定することでiframeの大きさは制御できました。
しかし、iframeで表示しているwebページは理想の画像のようにレスポンシブ対応してくれませんでした。
これはwebページの方の問題なのでしょうか・・・？

[bi_tsu]

「Onsen UI V2 Angular 1 Tabbar」のテンプレートではありますが、
記載されているURL:　https://www.hotpepper.jp/strJ000063796/
に書き換えたところ、理想の画像のようにレスポンシブ対応ができた状態で表示することができました。
webページに問題はないかと思います。

[mikan3rd]

すみません、Chromeのディベロッパーツールでは正しく表示されなかったのですが、実機では正常に表示されました！ありがとうございました