javascript:jsfiddle

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
javascript:jsfiddle [2022/09/17 02:54] – [レスポンシブ対応] ともやんjavascript:jsfiddle [2022/09/23 22:01] (現在) – [パラメータ] ともやん
行 139: 行 139:
     border: solid 3px;     border: solid 3px;
     border-color: lightgreen;     border-color: lightgreen;
 +    box-sizing: border-box;
   }   }
   .wrap_smart-device p.header {   .wrap_smart-device p.header {
     padding: 6px;     padding: 6px;
   }   }
-  .wrap_smart-device p:empty, +  .wrap_smart-device div {
-  .wrap_smart-device p:blank {+
     padding: 0;     padding: 0;
   }   }
 +  .jsfiddle_frame {
 +    transform: scale(1.014);
 +    transform-origin: top left;
 +  }
 +  .wrap_iframe_trim {
 +    width: 97%;
 +    overflow: hidden;
 +  }
 +  /*.wrap_smart-device p:empty,
 +  .wrap_smart-device p:blank {
 +    padding: 0;
 +  }*/
 </style> </style>
 </html> </html>
行 166: 行 178:
 </code></WRAP> </code></WRAP>
 <html> <html>
-<iframe width="480" 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="480" height="300" src="//jsfiddle.net/tomoyan596/af54jpzy/embedded/js,html,css,result,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 </html> </html>
 </WRAP> </WRAP>
行 176: 行 188:
     border: solid 3px;     border: solid 3px;
     border-color: hotpink;     border-color: hotpink;
 +    box-sizing: border-box;
   }   }
   .wrap_iframe_min-width1 {   .wrap_iframe_min-width1 {
行 191: 行 204:
     border: solid 3px;     border: solid 3px;
     border-color: hotpink;     border-color: hotpink;
 +    box-sizing: border-box;
   }   }
   .iframe_min-width1 {   .iframe_min-width1 {
行 201: 行 215:
 </code></WRAP> </code></WRAP>
 <WRAP iframe_min-width1><html> <WRAP iframe_min-width1><html>
-<iframe 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> </WRAP>
  
 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\ 同じコードのままで表示幅いっぱいにも対応できますが、今度はスクロールバーが邪魔です😭\\
 +<WRAP iframe_trim>
 <WRAP iframe_min-width1><html> <WRAP iframe_min-width1><html>
-<iframe 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>
行 216: 行 232:
     border: solid 3px;     border: solid 3px;
     border-color: hotpink;     border-color: hotpink;
 +    box-sizing: border-box;
   }   }
   .wrap_iframe_min-width2 {   .wrap_iframe_min-width2 {
     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;
行 250: 行 267:
   codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight;   codeBrowserResolution.innerText = window.innerWidth + ' x ' + window.innerHeight;
 </script> </script>
-<iframe 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> </WRAP>
  
 +<WRAP iframe_trim>
 <WRAP iframe_min-width2><html> <WRAP iframe_min-width2><html>
-<iframe 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.1663350887.txt.gz
  • 最終更新: 2022/09/17 02:54
  • by ともやん