【问题标题】:How do you embed a JsFiddle as an iFrame in HTML only?你如何将 JsFiddle 作为 iFrame 嵌入 HTML 中?
【发布时间】:2017-05-03 13:06:48
【问题描述】:

这就是当我将 JsFiddle 嵌入我的网站时发生的结果:

http://i.imgur.com/JkDefod.png

我该怎么做才能让我的嵌入式 JsFiddle 只显示正在运行的程序而不是上面的额外文本?

这是我的 JsFiddle 代码:

var handler = function() {
  if (--sec < 0) {
    sec = 59;
    if (--min < 0) {
      min = 0;
      sec = 0;
    }
  }
  var min1 = "0" + min + "m";
  var min2 = min + "m";
  var sec1 = "0" + sec + "s";
  var sec2 = sec + "s";
  document.getElementById("time").innerHTML = (min < 10 ? min1.fontcolor("red") : min2.fontcolor("red")) + ":".fontcolor("red") + (sec < 10 ? sec1.fontcolor("red") : sec2.fontcolor("red"));
};
var sec = 0;
var min = 15;
handler();
setInterval(handler, 1000);
<div id="worked"></div>
<h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
<h1 id="time" style="text-align: center;">&nbsp;</h1>

【问题讨论】:

  • 为什么不直接向页面添加代码?

标签: javascript html iframe jsfiddle


【解决方案1】:

你可以直接在你的页面中添加这段代码,或者使用嵌入的JsFiddle,这样做:

<div class="someClass">
<script async src="//jsfiddle.net/DiogoBernardelli/vuc85mok/embed/result/"></script>
</div>

并将其添加到您的样式表 (.css) 文件中:

.someClass iframe {
height: 200px //you can manually change this height
}

【讨论】:

    【解决方案2】:

    如果你只想在你的网页上添加这个倒计时,为什么不在你的div之后的标签中添加你的JS代码呢?

    类似这样的:

    <body>
    
    <div id="worked"></div>
    <h1 style="text-align: center;"><span style="color: #ff0000;"><strong>Offer Ends In:</strong></span></h1>
    <h1 id="time" style="text-align: center;">&nbsp;</h1>
    
    </body>
    
    <script>
    var handler = function() {
      if (--sec < 0) {
        sec = 59;
        if (--min < 0) {
          min = 0;
          sec = 0;
        }
      }
      var min1 = "0" + min + "m";
      var min2 = min + "m";
      var sec1 = "0" + sec + "s";
      var sec2 = sec + "s";
      document.getElementById("time").innerHTML = (min < 10 ? min1.fontcolor("red") : min2.fontcolor("red")) + ":".fontcolor("red") + (sec < 10 ? sec1.fontcolor("red") : sec2.fontcolor("red"));
    };
    var sec = 0;
    var min = 15;
    handler();
    setInterval(handler, 1000);
    </script>
    

    【讨论】:

      猜你喜欢
      • 2019-07-21
      • 2021-11-09
      • 1970-01-01
      • 1970-01-01
      • 2018-12-24
      • 1970-01-01
      • 2013-07-04
      • 2020-10-08
      • 2018-07-20
      相关资源
      最近更新 更多