jQuery contents() when used with 'iframe' , text disappears in firefox

Question

I'm trying to make a website, somewhat similar to jsbin.com. Here is a snap of how it looks in ...

Firefox - ScreenShot
Chromium - ScreenShot

Take a look at code !

$(".toggleButton").hover(function() {

  $(this).addClass("hightlightedButton");

}, function() {

  $(this).removeClass("hightlightedButton");

});


$(".toggleButton").click(function() {

  $(this).toggleClass("active");

  $(this).removeClass("hightlightedButton");

});


$(".panel").height($(window).height() - $("#header").height() - 14);


$(".panel").width(($(window).width() / 2) - 5);

$("iframe").contents().find("html").html($("#htmlPanel").val());

body {
  font-family: sans-serif;
  padding: 0;
  margin: 0;
}

#header {
  width: 99.2%;
  background: #EEEEEE;
  padding: 5px;
  height: 30px;
}

#logo {
  float: left;
  font-weight: bold;
  font-size: 120%;
  padding: 3px 5px;
}

#buttonContainer {
  width: 244px;
  margin: 0 auto;
}

.toggleButton {
  float: left;
  border: 1px solid grey;
  padding: 6px;
  border-right: none;
  font-size: 90%
}

#html {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#output {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right: 1px solid grey;
}

.active {
  background-color: #E8F2FF;
}

.hightlightedButton {
  background-color: grey;
}

textarea {
  resize: none;
  border-top: none;
  border-color: grey;
}

.panel {
  float: left;
}

iframe {
  border: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div id="header">

  <div id="logo">

    CodePlayer

  </div>

  <div id="buttonContainer">


    <div class="toggleButton active" id="html">HTML</div>

    <div class="toggleButton" id="css">CSS</div>

    <div class="toggleButton" id="javascript">JavaScript</div>

    <div class="toggleButton active" id="output">Output</div>


  </div>

</div>


<div id="bodyContainer">

  <textarea id="htmlPanel" class="panel" name="textarea">Hello World!</textarea>

  <iframe id="outputPanel" class="panel"></iframe>

</div>

(Take a note that when you run the above code with build-in run function of Stack over, the 'iframe' doesn't appear.)

Check out exact code : 'Paste Bin'

Problem Description

As you can see in Screenshots of Firefox Browser the Hello World! is not visible in the second tab, but in Screenshots of Chromium Browser can see it (in the second half of screen).

Main Line of code (I think) which needs to edited is in <script type="text/javascript"></script> (Tag).

$("iframe").contents().find("html").html($("#htmlPanel").val());

How to get the output same in Firefox, like it's in other browsers (Chromium)?

Extra: Solutions I tried, that are not working

iframe content disappears on Firefox (from stack-overflow)
Jquery contents() change html for iframe disappear in firefox (from stack-overflow)

jQuery contents() when used with 'iframe' , text disappears in firefox

0 Answers0