Question

我点击时发现window.onload事件很麻烦，似乎对我不起作用。

例如，当我点击复选框时，他们将调用函数来呈现带有内容的iframe。如果您取消注释第2行callOnLoad()，iframe将加载内容，但这不是我所期望的，我希望选中此复选框后，将呈现iframe中的内容。

Answer 1

我认为你想要下面的东西： -

iframe将在页面加载时显示（或在窗口加载时显示），但是当选中/取消选中复选框时，文本会显示/消失吗？

如果是，请执行以下操作： -

<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>

Answer 2

检查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>

JQuery Click不会影响window.onload

2 个答案: