使用另一个网页中的按钮更改一个网页中的 div答案

【问题标题】：change a div in one webpage using a button in another webpage使用另一个网页中的按钮更改一个网页中的 div
【发布时间】：2018-03-02 21:22:46
【问题描述】：

我有 2 个网页：一个用作电视，另一个用作遥控器。

这是电视

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to RemoteDemo</title>
    </head>
<body>
    <div id="Tvspace">
        <iframe width="560" height="315" src="SomeRandomYoutubeURL" frameborder="0"  allowfullscreen></iframe>      
    </div>
</body>
</html>

这是遥控器：

<!DOCTYPE html>
<html>
<head>
    <title>Remote</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <!--Click this to go on the next channel -->
    <button id = "next"> Next </button>
</body>
</html>

每当我点击下一个/上一个按钮时，我都希望在 div 名称“Tvspace”上加载另一个 iframe，而不是原来的。

我试过了，但它正在打开一个新页面

$("#next").on('click', function(){
     window.location = "http://www.google.com/";    
});

我希望它在不刷新或创建新页面的情况下加载内容。谢谢。

【问题讨论】：

这两个页面到底有什么关系？我从你的问题中只能看到两页，其中一个包含 iframe。
他们在同一个文件夹@Taplar

标签： javascript jquery html ajax

【解决方案1】：

在w3schools 他们说：

window.location 对象可用于获取当前页面地址 (URL) 并将浏览器重定向到新页面。

因此，您不能使用窗口位置来加载 iframe。您可以使用它来获取您设置为重定向到另一个页面的页面的 url。

如果您检查此link，您可以找到一种使用另一个网址加载 iframe 的方法：

$("#next").on('click', function(){
    $("#Tvspace iframe").attr("src", "http://www.google.com/");
});

【讨论】：