SQLの窓

2016年09月16日


Google Chrome で IFRAME を display:none で消してから表示すると、スクロールバーが消える。仕方ないので、visibility:hidden で代替



Google Chrome は、現在 53.0.2785.116 m です。Google Chrome は時々こういうバグが出ますが、そのうち修正されると思います。

webkit 的な css で 対処方法をいろいろ探ったのですが対応できなかったので、visibility:hidden で代替し、visibility:hidden だとその場所のスペースがそのままになるので、position:absolute を併用しました。

※ 他のブラウザでは display:none は 正しく動作します



上の IFRAME は 再表示するとスクロールバーが消えてしまいます(Google Chrome 53.0.2785.116 m)

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<input type="button" id="hide" value="display:none">
<input type="button" id="show" value="display:"><br>
<iframe
	id="iframe_target"
	src="about:blank"
	name="myframe"
	width="400"
	height="200"
	style='border:solid #000000 1px;'
></iframe>
<br>
<input type="button" id="hide2" value="visibility:hidden">
<input type="button" id="show2" value="visibility:visible"><br>
<div style='position:relative'>
<iframe
	id="iframe_target2"
	src="about:blank"
	name="myframe"
	width="400"
	height="200"
	style='border:solid #000000 1px;'
></iframe>
</div>
上の IFRAME は 再表示するとスクロールバーが消えてしまいます(Google Chrome 53.0.2785.116 m)
<script>
str="";
str+="<img src=\"https://lh3.googleusercontent.com/-c4ugzdOcnSU/VRt3mbqzu0I/AAAAAAAAZXU/41DpjImnF7ILujQmvRRRcok0rgIaYCptACHM/s400/b17brandon016.jpg\"> ";

$("#iframe_target").get(0).contentWindow.document.write(str);
$("#iframe_target").get(0).contentWindow.document.close();
$("#iframe_target2").get(0).contentWindow.document.write(str);
$("#iframe_target2").get(0).contentWindow.document.close();

$("#hide").on("click", function(){
	$("#iframe_target").css("display", "none");	
});
$("#show").on("click", function(){
	$("#iframe_target").css("display", "");	
});

$("#hide2").on("click", function(){
	$("#iframe_target2").css({"visibility": "hidden","position":"absolute"});	
});
$("#show2").on("click", function(){
	$("#iframe_target2").css({"visibility": "visible","position":"static"});	
});

</script>


IFRAME 内のコンテンツを document.write で作成すると、同一ドメインとして IFRAME 内を参照できます



【Google Chromeの最新記事】
posted by lightbox at 2016-09-16 04:33 | Comment(0) | Google Chrome | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり