How to access another page's elements after clicking href link on my website?

I made a website which contains div with href attribute, it links to some social media website. my intends to make user go to that website and automatically click on like button, but how can i access that website's elements after it loads up to user?

its just for practice

<button onclick="dropLikeButton()">Like</button>


function dropLikeButton() {
    window.location.href="https://www.instagram.com/p/B1G-tU4JFGp/";
    document.onload.querySelector(".glyphsSpriteHeart__outline__24__grey_9 u-__7").click();
}

it doesn't find any elements on that page.

Solution

You can't actually do that. You can only control what's going on on your site. The code you add will run on your site only, so when you do this:

function dropLikeButton() {
    window.location.href="https://www.instagram.com/p/B1G-tU4JFGp/";
    document.onload.querySelector(".glyphsSpriteHeart__outline__24__grey_9 u-__7").click();
}

this line

window.location.href="https://www.instagram.com/p/B1G-tU4JFGp/";

will start a redirect to https://www.instagram.com/p/B1G-tU4JFGp/ and then the browser will execute

document.onload.querySelector(".glyphsSpriteHeart__outline__24__grey_9 u-__7").click()

on your site! The code you wrote won't be there after instagram (or any other site) loads

Makes sense?

As a side note: You can embed sites using <iframe/>s, but still you won't be able to modify the html.