マジレス希望

HTML文でiframe srcで参照表示した領域。スクロールバーの表示を消すには？

解決済

質問者：s_end
質問日時：2018/02/08 11:33
回答数：4件

下記のHTML文は、
「あるWEBページの中に、他のページを参照（引用？）表示する」
という機能を持ったものです。（とあるところから引用しました）

で、このHTML文には
「その引用表示をする表示エリアが小さい場合は、
引用元の内容をすべて表示するために
スクロールバーを付加する」
という機能が含まれているようです。

で、ここで質問です。
このスクロールバーを表示させず、height、width　で指定した大きさのみで
表示させたいと思います。
スクロールバーが表示されないようにするには、下記のHTML文をどのように変えたらよいでしょうか？

なお、
「表示領域を思いっきり大きくすれば、スクロールさせずに参照先が全体が表示されるよ。その解決法方法でもいいかい？」
という解決方法はダメです。

↓HTML文です。これをたたき台にして変えてください。

<iframe src="https://ws.formzu.net/dist/S4726/" style="height: 500px; max-width: 600px; width: 100%; border: 0;" onload="if (navigator.userAgent.match(/iPhone|iPad/) !== null && formzuInitialLoad == true) this.scrollIntoView(true)"></iframe>
<script>
if (window.addEventListener) {
window.addEventListener( 'load', formzuInitialSetting, false );
}
else if (window.attachEvent) {
window.attachEvent( 'onload', formzuInitialSetting );
}
else {
window.onload = formzuInitialSetting;
}
function formzuInitialSetting() {
formzuInitialLoad = true;
}
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： fujillin
回答日時：2018/02/08 15:53

No1です

iframeの場合はoverflowだけではうまくいかないようですね、失礼いたしました。
以下ではいかがでしょうか？

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
iframe {
height: 500px; max-width: 600px; width: 100%;
border: 0; overflow: hidden;
}
</style>
</head>
<body>

<iframe src="https://ws.formzu.net/dist/S4726/" scrolling="no"></iframe>

</body>
</html>

- 0
- 件

通報する

この回答へのお礼

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

scrolling="no"
を付加したら、望みどおりにスクロールバーも表示されず、スクロールもできないようになりました。

<!DOCTYPE HTML>
から
<body>
までは付けても付けなくても同じ結果（スクロール無しになった）です。

とはいってもWEBにアップロードしたのではなく、WEBサイト制作ソフト上でのプレビューモードでの試行に過ぎないのですが、アップロードしても同様の動作になるならこれでOKです。

<!DOCTYPE HTML>
から
<body>
はどういったコーディングなのでしょうか？

通報する

お礼日時：2018/02/08 16:34

No.4

回答者： fujillin
回答日時：2018/02/08 17:29

No3です。

＞<!DOCTYPE HTML>
＞から
＞<body>
一般的なhtmlの一式を示したにすぎません。
特に、ご提示のタグ内にあったstyleをstyleタグに移しましたので、その部分も含めて提示するなら、一式で示してしまった方が説明がいらないと思った次第なのですが・・・

まさか、そこに質問が来るとは思ってもみなかった（汗）
http://www.htmq.com/html5/doctype.shtml

- 0
- 件

通報する

この回答へのお礼

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

通報する

お礼日時：2018/02/08 20:20

No.3

回答者： fujillin
回答日時：2018/02/08 15:55

No2です

No2のサンプルのiframeタグのsrc属性のURL部分のクォーテーションが書き換えられてしまったようですので、ご注意ください

- 0
- 件

通報する

この回答へのお礼

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

>No2のサンプルのiframeタグのsrc属性のURL部分のクォーテーションが書き換えられてしまったようですので、ご注意ください

どこがどのように書き換えられているのでしょうか？

通報する

お礼日時：2018/02/08 16:35

No.1

回答者： fujillin
回答日時：2018/02/08 14:50

こんにちは

CSSで、overflow:hidden にしておけばスクロールバーは出なくなります。
この場合、コンテンツが表示エリアからはみ出していると、そこを閲覧するのは難しくなります。（スクロールできないので）
https://developer.mozilla.org/ja/docs/Web/CSS/ov …

なお、ご提示のスクリプト（一部分だけなので内容が不明ですが）が別途スクロールバー等の設定を上書きしている可能性もありますので、上記のままでも良いのならスクリプトは外しておく必要があるのかも知れません。
（内容が不明なので、必要か不要かの判断もできませんが…）

- 0
- 件

通報する

この回答へのお礼

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

>この場合、コンテンツが表示エリアからはみ出していると、そこを閲覧するのは難しくなります。（スクロールできないので）

べつに構いません。というか、それが目的なので。

具体的なコーディングとしては

<iframe src="https://ws.formzu.net/dist/S4726/" style="height: 500px; max-width: 600px; width: 100%; border: 0;" onload="if (navigator.userAgent.match(/iPhone|iPad/) !== null && formzuInitialLoad == true) this.scrollIntoView(true)"></iframe>

を

<iframe src="https://ws.formzu.net/dist/S4726/" style="height: 500px; max-width: 600px; width: 100%; border: 0; overflow:hidden; " onload="if (navigator.userAgent.match(/iPhone|iPad/) !== null && formzuInitialLoad == true) this.scrollIntoView(true)"></iframe>

にすればよいのでしょうか？
やってみましたが、スクロールバーは表示されたままでした。