javascript:jsfiddle

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:jsfiddle [2022/09/17 04:04] – [レスポンシブ対応] ともやんjavascript:jsfiddle [2022/09/23 22:01] (現在) – [パラメータ] ともやん
行 148: 行 148:
   }   }
   .jsfiddle_frame {   .jsfiddle_frame {
-    transform: scale(1.015);+    transform: scale(1.014);
     transform-origin: top left;     transform-origin: top left;
   }   }
-  .wrap_smart-device p:empty,+  .wrap_iframe_trim { 
 +    width: 97%; 
 +    overflow: hidden; 
 +  } 
 +  /*.wrap_smart-device p:empty,
   .wrap_smart-device p:blank {   .wrap_smart-device p:blank {
     padding: 0;     padding: 0;
-  }+  }*/
 </style> </style>
 </html> </html>
行 216: 行 220:
  
 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\ 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\
 +<WRAP iframe_trim>
 <WRAP iframe_min-width1><html> <WRAP iframe_min-width1><html>
 <iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> <iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP> </html></WRAP>
 +</WRAP>
  
 <html> <html>
行 231: 行 237:
     overflow-x: scroll;     overflow-x: scroll;
   }   }
-  @media (min-width: 425px) { /* >= 425px */+  @media (min-width: 433px) { /* >= 425px -> 433px */
   .wrap_iframe_min-width2 {   .wrap_iframe_min-width2 {
     overflow-x: hidden;     overflow-x: hidden;
行 265: 行 271:
 </WRAP> </WRAP>
  
 +<WRAP iframe_trim>
 <WRAP iframe_min-width2><html> <WRAP iframe_min-width2><html>
 <iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> <iframe class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html></WRAP> </html></WRAP>
 +</WRAP>
  
 +===== パラメータ =====
 +<html>
 +<iframe id="jsfiddle001" class="jsfiddle_frame" width="100%" height="300" src="//jsfiddle.net/tomoyan596/4vw7e2j5/embedded/result,js,html,css,resources/dark/?param1=value1&param2=value2" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 +<script>
 +  let iframe = document.getElementById("jsfiddle001");
 +  iframe.contentWindow.hoge = "受け渡す値";
 +  window.hoge = "受け渡す値";
 +</script>
 +</html>
 ===== 参考文献 ===== ===== 参考文献 =====
 [[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\ [[https://codysaylor.com/notes/comparing-codepen-jsfiddle-cssdeck-liveweave-jsbin-dabblet/|Comparing Codepen, JSFiddle, JSBin, Glitch, Plunkr, CSSDeck, Liveweave, Dabblet | Cody Saylor]]\\
  
  • javascript/jsfiddle.1663355047.txt.gz
  • 最終更新: 2022/09/17 04:04
  • by ともやん