change a div in one webpage using a button in another webpage

Question

I have 2 web pages: one acts like the TV and the other as the remote.

This is TV

<!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>

And this is the Remote:

<!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>

Whenever I click on the next/previous button I want another iframe to load on the div name "Tvspace" instead of the original.

I tried this but it is opening a new page

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

I want it to load the contents without refreshing or creating a new page. Thank you.

How exactly are the two pages related? All I can see from your question is two pages, one of which contains an iframe. — Taplar, Mar 02 '18 at 21:32

Ricardo Rocha · Answer 1 · 2018-03-06T10:04:02.857

In w3schools they said:

window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.

So, you cannot use the window location to load your iframe. You can use it to get the url of your page your set it to redirect to another page.

If you check this link, you can find a way to load your iframe with another url:

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

change a div in one webpage using a button in another webpage

1 Answers1