代码之家 › 专栏 › 技术社区 › Hassaan Iqbal

点击按钮打开网站,无需重新加载整个页面(AJAX)

ajax jquery html javascript

Hassaan Iqbal · 技术社区 · 4 年前

我想在我的网站上制作一个按钮(单选、按钮或复选框),让用户重定向到其他页面,而无需重新加载整个页面,我在这方面并不专业,但我对AJAX知之甚少,我唯一知道的是,这可以通过替换现有的“div”内容来实现。让我在这里解释一下我想要实现的目标:“假设我的网站上有三个单选按钮,带有标签(谷歌、YouTube和Facebook),我想做的就是当用户单击谷歌按钮时,它应该显示谷歌主页,保持在同一页面上,而不重新加载页面,谷歌网站应该在单选按钮下面打开,其余按钮也应该这样做。”

<!DOCTYPE HTML>
<html>
    <style>
        .test1 {  
            width: 100%;
            height: 50%;  
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("input").click(function(){
                $("#test").load(location.href = "https://www.google.com");
            });
        });
    </script>
    <div>
        <center><p><strong>Websites:</strong>
            <input type="radio" id="google" name="web">
            <label for="google">Google</label>
            <input type="radio" id="youtube" name="web">
            <label for="youtube">YouTube</label>
            <input type="radio" id="fb" name="web">
            <label for="fb">Facebook</label></p></center>
    </div>
    <div id="test" class="test1">
        //Websites should be loaded here//
    </div>
</html>

需要专家意见,高度赞赏示例或演示:-)

更新:我已经添加了我目前正在处理的代码,目前通过单击任何单选按钮,它将显示Google主页,但不会动态显示,因为我不知道如何在AJAX中工作。

0 回复 | 直到 4 年前

Web Dev 4 年前

这不可能,我帮你查过了

实现这一点的唯一方法是使用iframe,然而,上述所有网站都有一个称为CORS的功能,可以检查网站是从父域还是在另一个父域加载的。因此,这似乎无法做到!

使现代化

根据注释中的要求,这里有一个非常基本的示例(非常基本的JS)。希望这个想法可以理解!

 window.addEventListener('load', one);
    document.getElementById("one").addEventListener("click", one);
    document.getElementById("two").addEventListener("click", two);
    document.getElementById("three").addEventListener("click", three);


    function one() {
        ['example2', 'example3'].forEach(function(id) {

            document.getElementById(id).style.display = "none";
            document.getElementById("example1").style.display = "block";

        });

    }

    function two() {
        ['example1', 'example3'].forEach(function(id) {

            document.getElementById(id).style.display = "none";
            document.getElementById("example2").style.display = "block";

        });

    }

    function three() {
        ['example1', 'example2'].forEach(function(id) {

            document.getElementById(id).style.display = "none";
            document.getElementById("example3").style.display = "block";

        });
    }

   .iframe {
            width: 100vw;
            height: 85vh;
        }

     <title>Example</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS v5.0.2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <nav class="mt-3 mx-3 text-center">
        <li class="row">
            <ul class="col-md"><button id="one">Example 1</button></ul>
            <ul class="col-md"><button id="two">Example 2</button></ul>
            <ul class="col-md"><button id="three">Example 3</button></ul>
        </li>
    </nav>
    <div id="example1">
        <p>Page 1</p>
        <iframe src="https://example.com" class="iframe" frameborder="0"></iframe>
    </div>
    <div id="example2">
        <p>Page 2</p>
        <iframe src="https://example.com" class="iframe" frameborder="0"></iframe>
    </div>
    <div id="example3">
        <p>Page 3</p>
        <iframe src="https://example.com" class="iframe" frameborder="0"></iframe>
    </div>
    <!-- Bootstrap JavaScript Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>