如何通过AJAX实现点击按钮无整页刷新加载外部网页到指定div

你当前代码无法实现预期效果，核心有3个问题：

• 点击事件逻辑里硬编码了固定的Google地址，没有和选中的单选按钮做关联，所以点哪个都只会加载Google
• 代码里写的location.href = "https://www.google.com"本身是页面跳转语法，和你要的无刷新加载需求完全相悖
• 直接用jQuery的load()方法跨域拉取第三方站点内容，会被浏览器同源安全策略拦截，根本无法正常把第三方站点内容插入到当前页面的div中

第三方站点嵌入不要用AJAX拉取内容替换div的方案，跨域限制下该方案无法落地，改用iframe元素嵌入站点是最通用、无跨域问题的方案：

• 给每个单选按钮绑定对应要加载的站点地址标记
• 点击单选按钮时，不刷新整页，只动态修改iframe的src属性为对应站点地址，iframe会自动加载目标站点内容
• 给iframe设置宽高100%撑满下方展示区域即可

<!DOCTYPE HTML>
<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .radio-group {
            text-align: center;
            padding: 16px 0;
        }
        #content-wrap {
            width: 100%;
            height: calc(100vh - 70px);
        }
        #content-wrap iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="radio-group">
        <p><strong>Websites:</strong>
            <input type="radio" id="google" name="web" data-url="https://www.google.com">
            <label for="google">Google</label>
            <input type="radio" id="youtube" name="web" data-url="https://www.youtube.com">
            <label for="youtube">YouTube</label>
            <input type="radio" id="fb" name="web" data-url="https://www.facebook.com">
            <label for="fb">Facebook</label>
        </p>
    </div>
    <div id="content-wrap">
        <iframe id="site-frame" src="" referrerpolicy="no-referrer"></iframe>
    </div>

    <script>
        $(document).ready(function(){
            $("input[name='web']").on('change', function(){
                // 获取选中单选按钮绑定的站点地址
                let targetUrl = $(this).data('url');
                // 给iframe设置地址，自动加载对应内容，无整页刷新
                $("#site-frame").attr('src', targetUrl);
            });
        });
    </script>
</body>
</html>

• 用data-url自定义属性给每个单选按钮存储对应站点地址，后续新增选项只需要加单选按钮配对应data-url即可，不用改JS逻辑
• 把原来的click事件换成change事件，只有单选按钮选中状态变化时才触发，避免重复触发加载
• iframe设置border: none去掉默认边框，referrerpolicy="no-referrer"减少部分站点的嵌入限制
• 容器高度用视口高度计算，保证嵌入站点能占满剩余可视区域

注意：部分站点会配置X-Frame-Options响应头禁止被其他页面嵌入，这种情况无论用什么前端方案都无法在iframe中加载对应站点，属于站点自身的安全限制，不是代码逻辑问题。

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