0

I want to make a kind-of click-redirect (user clicks on span, another element gets .click()ed programatically) on the YouTube subscribe button embedded in my webpage. The markup is (simplified) the following after Google's script runs over the initial markup:

<!-- The property `otherproperties="notmentionedhere"` is a placeholder for the other properties those elements have, some of those properties vary with each load of the page. -->
<div id="___ytsubscribe_0" otherproperties="notmentionedhere">
    <iframe otherproperties="notmentionedhere">
        #document <!-- This element doesn't really exist, it's Firefox's way of representing the markup inside the iFramed page in DevTools -->
            <!--some other elements-->
                <button data-channel-external-id="UCO6YRllfXXIe2lPWenjmfPw" otherproperties="notmentionedhere"><!-- some other elements /--></button>
            <!--/some other elements-->
</div>

My current code in the onlick property of the span to click that button:

document.getElementById('___ytsubscribe_0').querySelector('iframe').contentWindow.document.querySelector('button[data-channel-external-id=UCO6YRllfXXIe2lPWenjmfPw]').click();

The problem I have is that an element's ID property must begin with a letter but the YouTube subscribe button's container's ID begins with three underscores.

Here's a code snippet that shows the actual markup plus my code:

<!-- You might have to copy the markup into an own HTML document on your computer to see it in action, at least for me it always fails on load with a "SecurityError: Document.cookie getter: Forbidden in a sandboxed document without the 'allow-same-origin' flag."... -->
<span onclick="document.getElementById('___ytsubscribe_0').querySelector('iframe').contentWindow.document.querySelector('button[data-channel-external-id=UCO6YRllfXXIe2lPWenjmfPw]').click();">Click here to subscribe!</span>
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" id="yt-sub-dark" data-channelid="UCO6YRllfXXIe2lPWenjmfPw" data-layout="full" data-theme="dark" data-count="default"></div>

Note: it's a seperate question to click on a button inside a CrossOrigin-iFrame. This question is just about finding the whose id begins with underscore.

Lampe2020
  • 115
  • 1
  • 12
  • 1
    I'm not sure I've fully understood but, if you have a web page with the embedded button you could use the browser's inspector to fish out a valid alternative selector from the copy menu for the button. – Dave Pritlove Nov 29 '22 at 22:29

1 Answers1

2

You can use Document.querySelector()

See the snippet below.

const ytsubdiv = document.querySelector('#___ytsubscribe_0')

console.log(ytsubdiv)
<div id="___ytsubscribe_0" otherproperties="notmentionedhere">
  <iframe otherproperties="notmentionedhere">
        #document <!-- This element doesn't really exist, it's Firefox's way of representing the markup inside the iFramed page in DevTools -->
            <!--some other elements-->
                <button data-channel-external-id="UCO6YRllfXXIe2lPWenjmfPw" otherproperties="notmentionedhere"><!-- some other elements /--></button>
            <!--/some other elements-->
            </iframe>
</div>
Aib Syed
  • 3,118
  • 2
  • 19
  • 30
  • I just noticed that the YT-sub-button-iframe a CrossOrigin-resource is, is it possible to still dispatch a click on the button inside? EDIT: I'll check out https://stackoverflow.com/questions/9393532/cross-domain-iframe-issue for that... – Lampe2020 Nov 30 '22 at 11:18