如何实现点击提交按钮时显示<iframe>？技术求助

嘿，我懂你想要实现的效果——点击提交按钮后，在当前页面里显示一个iframe来加载对应IP的信息，而不是新开浏览器窗口对吧？我来帮你调整代码，一步步搞定它～

现有代码的问题 #

你当前的代码用了window.open()，这会直接新开一个标签页打开IP数据接口，而不是在页面内嵌入iframe显示内容，这就是你没法推进的核心原因啦。

修改后的完整代码 #

我们需要先在页面里添加一个默认隐藏的iframe，然后修改按钮的点击事件，把接口地址赋值给iframe的src属性，再让它显示出来：

<!DOCTYPE html>
<html>
<body>
  <!-- 输入IP的文本框 -->
  <input type="text" id="text" placeholder="输入IP地址" />
  <!-- 提交按钮 -->
  <input type="button" id="btn" value="Submit" onClick="showIpFrame()" />
  <!-- 默认隐藏的iframe -->
  <iframe id="ipFrame" style="display:none; width:100%; height:500px; border:1px solid #ccc;" title="IP数据信息"></iframe>

  <script>
    function showIpFrame() {
      // 获取输入的IP地址
      const ipAddress = document.getElementById('text').value;
      // 获取iframe元素
      const ipFrame = document.getElementById('ipFrame');
      
      // 检查是否输入了IP
      if (ipAddress) {
        // 设置iframe的源地址
        ipFrame.src = `https://api.ipdata.co/${ipAddress}`;
        // 显示iframe
        ipFrame.style.display = 'block';
      } else {
        // 如果没输入，提示用户
        alert('请输入IP地址哦');
      }
    }
  </script>
</body>
</html>

关键说明 #

• 我们给iframe加了默认的样式：宽度100%、高度500px、浅灰色边框，你可以根据自己的需求调整这些样式。
• 点击按钮时会先检查用户是否输入了IP，避免空值导致的接口错误。
• 把原来的内联事件抽成了单独的函数showIpFrame()，代码更清晰也更容易维护。

如果之后你想结合geolocation自动获取用户的IP（而不是手动输入），可以再进一步优化，但目前这个版本已经能满足你点击提交显示iframe的核心需求啦～

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