如何通过jQuery点击按钮获取输入框值并设置iframe的src属性

首先修正你现有代码里的拼写错误：<ifram> 应该写成 <iframe>，否则标签无法正常工作。

完整实现代码 #

<input type="text" id="urlInput" placeholder="输入网址">
<button id="loadBtn">加载页面</button>

<iframe id="targetIframe" src="" width="100%" height="500px"></iframe>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  // 绑定按钮点击事件
  $('#loadBtn').click(function() {
    // 获取输入框去空格后的内容
    const url = $('#urlInput').val().trim();
    // 校验输入有效性
    if (url) {
      // 自动补全http协议，避免无协议导致的加载失败
      const fullUrl = url.startsWith('http') ? url : `http://${url}`;
      // 设置iframe的src属性
      $('#targetIframe').attr('src', fullUrl);
    } else {
      alert('请输入有效的网址');
    }
  });
});
</script>

关键细节说明 #

• 给每个元素添加id属性，让jQuery能精准选择元素，避免干扰页面其他同类标签
• 加入输入校验：去除空格、判断非空，同时自动补全http://协议（很多用户会忽略输入协议，导致iframe无法正确加载外部页面）
• 给iframe设置了默认宽高，方便直观查看加载的页面内容
• 确保引入jQuery库，示例用了官方CDN，也可以下载到本地引入使用

内容的提问来源于stack exchange，提问作者Musawar ahmed