点击切换iframe内容功能的实现问题求助

嘿，我来帮你排查下这个问题～ 首先看你的代码逻辑其实是对的，但可能是几个新手容易踩的小坑导致功能失效，我给你梳理下：

最可能的问题：没引入jQuery库 #

你整个脚本都是用jQuery的$语法写的，但如果你的页面里没有提前引入jQuery，浏览器根本不认识$是什么，点击事件自然绑定不上。解决办法很简单：在你的自定义脚本标签之前，先引入jQuery——你可以下载本地的jQuery文件，用<script src="你的jQuery文件路径"></script>的方式引入就行。

第二个小问题：HTML结构不规范 #

你把<li>直接放在<div>里了，按照HTML规范，<li>必须包裹在<ul>或者<ol>标签里面才行，虽然有些浏览器会容错，但这可能导致选择器无法正确匹配到.loadiframe元素。修正后的HTML结构应该是这样的：

<div>
  <ul>
    <li class="loadiframe" data-src="nerdout.html"> test </li>
    <!-- 可以在这里加更多切换选项 -->
  </ul>
  <iframe id='frame' src="index.html" frameborder="0" width="600" height="480"></iframe>
</div>

可以优化的脚本细节 #

你的脚本里定义了width和height变量但没用到，如果以后需要动态修改iframe的宽高，可以把这部分逻辑补上；另外最好把代码放在$(document).ready()里，确保页面DOM元素都加载完成后再绑定事件，避免找不到元素的情况：

$(document).ready(function() {
  $('.loadiframe').on('click', function(){
    const $currentItem = $(this);
    const newSrc = $currentItem.data('src');
    // 如果需要动态改宽高，就取消下面的注释，同时给li加上data-width和data-height属性
    // const newWidth = $currentItem.data('width');
    // const newHeight = $currentItem.data('height');

    const $frame = $('#frame');
    $frame.attr('src', newSrc);
    // if (newWidth) $frame.attr('width', newWidth);
    // if (newHeight) $frame.attr('height', newHeight);
  });
});

最后再检查两个点 #

• 确认nerdout.html、index.html这些文件和当前页面在同一个目录下，路径别写错了，不然iframe会加载失败
• 打开浏览器的开发者工具（按F12），切换到Console标签，看看有没有报错信息——比如$ is not defined就说明jQuery没引入，这能帮你快速定位问题

内容来源于stack exchange