CODEWITHSUNDEEP
javascriptjqueryiframe
Mike Nguyen
Mike Nguyen

Reputation: 1053

JQuery Click does not effect window.onload

I have a trouble to fire window.onload event when I clicked, seem it doesn't work to me.

For example, when I clicked checkbox they will call function to render iframe with content. If you uncomment line 2 callOnLoad(), the iframe will be loaded with content, but this is not what I expect, I expect when the checkbox checked, the content in iframe will be rendered.

JSFiddle Demo

Upvotes: 1

Views: 392

Answers (2)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72269

I assume that you want below thing:-

iframe will show on page-load(or on window-load),but the text appear/disappear when check-box checked/unchecked?

If yes do like below:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <input type="checkbox" id="cgv" />
        <div id="foo"></div>
</body>

<script>
$(document).ready(function() {
    callOnLoad();
    $('#cgv').on('click', function(e) {
        if ($('#cgv:checked').length !== 0) {
            $('#iframe').contents().find("body").append('Test <br/>' + new Date());
        } else {
            $('#iframe').contents().find("body").html('');
        }
    });
});
// Function render iframe
function callOnLoad() {
    $("#foo").append("<div id=\"div-parent\"><iframe id=\"iframe\"></iframe></div>");
}
</script>

Upvotes: 1

RonyLoud
RonyLoud

Reputation: 2436

Check Fiddle

JS:

// Add your javascript here
$(function() {
  $('#cgv').on('click', function(e) {
    if ($('#cgv:checked').length !== 0) {
      callOnLoad(); // Load iframe here, iframe does not work, the content does not render
    } else {
      $('#div-parent').remove(); // Remove div,
    }
  });
});

// Function render iframe
function callOnLoad() {
  $("#foo").append("<div id=\"div-parent\"><iframe id=\"iframe\" class=\"active\"></iframe></div>");
  var iframe = $("#foo").find('[id="iframe"]');
iframe.contents().find("body").append('Test <br/>' + new Date());

}

HTML:

<input type="checkbox" id="cgv" />
  <div id="foo">
  </div>

Upvotes: 1

Related Questions