Question 36023 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Get the iframe src without using getElementById – Jquery

Is there a way I can pass the iframe src into a variable without using getElementById ?

I dont know the ID of the iframe as its dynamically generated – but I want to be able to check the src to see if it matches a defined string – the iframe has a class which I can target which is fancybox-iframe

I was hoping this would work but it does not:

 var srcURL = document.getElementsByClassName('fancybox-iframe').src;
Tags:

3

Answers


  1. 0

    You can use the method getgetElementsByTagName():

    srcURL = document.getElementsByTagName("iframe")[0].src;

    Take care the name of this method is written in plural form so the result is an array, even the array will contain one element. That’s why the argument [0] is appended.

    Login or Signup to reply.
  2. 0 
    Element.prototype.getElementsByClassName

    returns an array of elements, so you should use

    document.getElementsByClassName('fancybox-iframe')[0].src

    or better yet

    const elements = Array.from(document.getElementsByClassName('fancybox-iframe'))
  .filter(element => element.tagName.toLowerCase() == 'iframe');

if(!elements.length) {
  // handle no iframe.fancybox-iframe found
}

const src = elements[0].src

    https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName

    https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByClassName

    Also you can use Element.prototype.querySelector and Element.prototype.querySelectorAll to avoid filtering the getElementsByClassName result and get directly the iframes as so

    const elements = Array.from(document.querySelectorAll('iframe.fancybox-iframe'))
    Login or Signup to reply.
  3. 0

    Confirmed in the comments:

    • there’s multiple iframes
    • only one has the class fancybox-iframe
    • jquery is already in use

    You can select an iframe with a specific class using

    $("iframe.fancybox-iframe")

    then apply .attr("src") to get the source:

    $("iframe.fancybox-iframe").attr("src")

    This is in the format of nodename.class (without any spaces) which means the element must be of node type (iframe) and have the class (fancybox-iframe).

    You could probably also use

    $(".fancybox-iframe").attr("src")

    if that class is only used on that iframe.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search