Question

我正在研究一个非常基础的学校项目，并且我的iframe存在一些问题。我运行了一些jquery代码，允许我通过点击div来激活iframe。问题是，当我曾经激活过iframe时，我无法激活其他iframe。 Sidnote，jquery重复了4次，唯一的变化是id，在这种情况下是sais＆＃34;＃computer＆＃34;

这里是jquery和html。提前致谢

<script type="text/javascript"         src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#computer').click(function(){
        if(!$('#iframe').length) {
                $('#iframeHolder').html('<iframe id="iframe"     src="../iframes/computer_iframe.html" width="100%" height="100%"></iframe>');
    }
    });`enter code here`
});
</script>

<div class="clickable iframe activating divs">
    <div id="computer" class="computer_box"><p class="computer_text">My     Computer<p></div>
    <div id="monitor" class="monitor_box"><p class="monitor_text">My Monitor</p></div>
    <div id="keyboard" class="keyboard_box"><p class="keyboard_text">My Keyboard</p></div>
    <div id="mice" class="mice_box"><p class="mice_text">My Mice</p></div>
</div> <!--clickable iframe activating divs -->

该网站实际上在我的学校网站上，您可以在此处查看问题My website

Answer 1

从它的外观来看，如果iFrame已经存在，你只允许创建iFrame：

$('#computer').click(function(){
  if(!$('#iframe').length) {
    $('#iframeHolder').html('<iframe id="iframe" src="../iframes/computer_iframe.html" width="100%" height="100%"></iframe>');
  }
});

当您添加第一个iFrame时，$('#iframe').length将为1，从而导致if条件无效。考虑到您只是更改 iFrame的内容，可以跳过整个条件 - $('#iframeHolder').html()只会替换内容（如果已存在）：

$('#computer').click(function(){
  $('#iframeHolder').html('<iframe id="iframe" src="../iframes/computer_iframe.html" width="100%" height="100%"></iframe>');
});

希望这有帮助！

使用jquery代码激活iframe的问题

1 个答案: