Skip to main content
S
starfleetUpTo.date
Inspiring
April 15, 2022
Answered

identify a certain "a" of several without class or id - in order to transfer it's src to an iframe

  • April 15, 2022
  • 1 reply
  • 464 views

Jo'Lantru and Namaste,

here is the html structure where I need to read the src attribute only from a certain anchor tag: That the element directly before it, which is on the same level according to the DOM is an individual <h5> with innerHTML "iFrame" [see code block II] could be a great help to solve I assume, especially because the ammount and index of links could change from scenario to scenario that code will be used.

 

In the following at code block I my maybe clamsy steps to identify the correct link among other data by trying to taget the link with those certain h5 and .nextSibling, but no success so far. The code also contains the adding of the target iframe where the links src shall be copied, too. My failed attempts are outcommented.

Please don't only answer with something like: "You simply need to use querySelectorAll..." ...without how and descriping the next step's filter method just with an exotic verb thay sounds barely like programming, even for a not to JS experienced, but provide the complete required code with correct syntax additionally.

Many thanks in advance!

 

 

if (window.location.href.indexOf("option=com_community&view=profile") > -1) {

    var COSMiframe = document.createElement('iframe');
    COSMiframe.src="https://some-domain.TLD/stream";
    COSMiframe.id = "COSMiframe"
    COSMiframe.style.width = "100%";
    var COSMIframe_location = document.getElementsByClassName("content");
    COSMIframe_location[0].prepend(COSMiframe);
    COSMiframe.setAttribute("style", "width:100%; height: 585px");

    //var linksss = document.getElementsByTagName("a");

    //var arrayOfAnchors = document.all.tags("A");
	//alert(arrayOfAnchors);

    //var profile_value_headlines = document.all.tags('h5');
	
	
    //alert(profile_value_headlines);

	/*


    var indexOfThree = profile_value_headlines.indexOf("iFrame");
    alert(indexOfThree);

        var iFrame_link = indexOfThree.nextSibling;

        COSMiframe.src=iFrame_link;

    */
}

 

code block II

<div class="joms-middlezone" data-ui-object="joms-tabs">
                <div><div class="joms-tab__bar">
                    <a href="#joms-app--feeds-special">Stream</a>
                            <a class="active" href="#joms-app--aboutme-special">About me</a>
            </div>

<!-- begin: .app-box -->
<div id="joms-app--feeds-special" class="joms-tab__content joms-tab__content--stream  app-core" style="display:none">

    <div class="joms-gap"></div>

    <!-- end: .app-box-header -->

    <!-- begin: .app-box-content -->
    <div class="joms-app--wrapper">
                

<!-- begin: .joms-stream__wrapper -->
<div class="joms-stream__wrapper">

    <div class="joms-load-latest joms-js--stream-latest" style="display:none;"></div>

    <!-- begin: .joms-stream__container -->
    <div class="joms-stream__container" data-filter="active-profile" data-filter-value="" data-filterid="340" data-pageid="" data-groupid="" data-eventid="" data-profileid="">

        
        
    </div>
    <!-- end: .joms-stream__container -->

    
    
    
</div>
<!-- end: .joms-stream__wrapper -->

            </div>
    <!-- end: .app-box-content -->
</div>
<!-- end: .app-box -->

<!-- begin: .app-box -->
<div id="joms-app--aboutme-special" class="joms-tab__content joms-tab__content--stream  app-core">

    <div class="joms-gap"></div>

    <!-- end: .app-box-header -->

    <!-- begin: .app-box-content -->
    <div class="joms-app--wrapper">
                

<div class="app-box-content">
    <ul class="joms-list__row joms-push">
 
     <li>
        <span style="font-family: ff; font-size: 66px !important">V.I.C.I. </span><span style="font-size: 66px !important" class="profile_type">✪✪✪⚡Q⚡✪✪✪</span>    </li>
</ul>

            <ul class="joms-list__row joms-push">

                                    <li><h4 class="joms-text--title joms-text--bold">Education</h4></li>
                
                                    
                                                    <li>
                                <h5 class="joms-text--light">Gender</h5>
                                                                    <span>
                                        <a href="/index.php?option=com_community&amp;view=search&amp;task=field&amp;FIELD_GENDER=COM_COMMUNITY_MALE&amp;Itemid=111&amp;lang=en"> Male </a>                                    </span>
                                                            </li>
                                                                
                                                    <li>
                                <h5 class="joms-text--light">Preferential</h5>
                                                                    <span>
                                        <a href="/index.php?option=com_community&amp;view=search&amp;task=field&amp;PREFERENTIAL_FIELD=female&amp;type=radio&amp;Itemid=111&amp;lang=en">female</a><br>                                    </span>
                                                            </li>
                                                        </ul>

        
            <ul class="joms-list__row joms-push">

                                    <li><h4 class="joms-text--title joms-text--bold">Basic Information</h4></li>
                
                                    
                                                    <li>
                                <h5 class="joms-text--light">iFrame</h5>
                                                                    <span>
                                        <a rel="nofollow" href="https://chaturbate.com/in/?tour=SHBY&amp;campaign=eUOrP&amp;track=embed&amp;room=isscooperativesexy&amp;bgcolor=black" target="_blank">https://chaturbate.com/in/?tour=SHBY&amp;campaign=eUOrP&amp;track=embed&amp;room=isscooperativesexy&amp;bgcolor=black</a>                                    </span>
                                                            </li>
                                                        </ul>

        </div>
<div class="joms-module__footer">
    </div>



            </div>
    <!-- end: .app-box-content -->
</div>
<!-- end: .app-box -->
</div>            </div>

 

kolkl;

    This topic has been closed for replies.
    Correct answer osgood_

    Using your workflow/code set up to get the 'href' of the anchor tag which follows the h5 tag with the innerText of  'iFrame':

     

    (Use your browser developer tools to view the console.log results which I've left in the code below).

     

     

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get href from specific anchor tag</title>
</head>
<body>

<h5 class="joms-text--light">iFrame</h5>
<span>
<a rel="nofollow" href="https://chaturbate.com/in/?tour=SHBY&amp;campaign=eUOrP&amp;track=embed&amp;room=isscooperativesexy&amp;bgcolor=black" target="_blank">https://chaturbate.com/in/?tour=SHBY&amp;campaign=eUOrP&amp;track=embed&amp;room=isscooperativesexy&amp;bgcolor=black</a>                                    </span>


<script>
const allh5Tags = document.querySelectorAll('h5');

allh5Tags.forEach(function(item) {
if(item.innerText === "iFrame") {
let nextTag = item.nextElementSibling;
console.log(nextTag);
let nextTagContent = nextTag.innerHTML;
console.log(nextTagContent);
let hrefs = nextTagContent.match(/href="([^"]*)/);
let href = hrefs[hrefs.length-1];
console.log(href);
}	
})

</script>

</body>
</html>

     

     

     

    U 

    1 reply

    O
    osgood_Correct answer
    Legend
    April 15, 2022

    Using your workflow/code set up to get the 'href' of the anchor tag which follows the h5 tag with the innerText of  'iFrame':

     

    (Use your browser developer tools to view the console.log results which I've left in the code below).

     

     

     

     

    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Get href from specific anchor tag</title>
</head>
<body>

<h5 class="joms-text--light">iFrame</h5>
<span>
<a rel="nofollow" href="https://chaturbate.com/in/?tour=SHBY&amp;campaign=eUOrP&amp;track=embed&amp;room=isscooperativesexy&amp;bgcolor=black" target="_blank">https://chaturbate.com/in/?tour=SHBY&amp;campaign=eUOrP&amp;track=embed&amp;room=isscooperativesexy&amp;bgcolor=black</a>                                    </span>


<script>
const allh5Tags = document.querySelectorAll('h5');

allh5Tags.forEach(function(item) {
if(item.innerText === "iFrame") {
let nextTag = item.nextElementSibling;
console.log(nextTag);
let nextTagContent = nextTag.innerHTML;
console.log(nextTagContent);
let hrefs = nextTagContent.match(/href="([^"]*)/);
let href = hrefs[hrefs.length-1];
console.log(href);
}	
})

</script>

</body>
</html>

     

     

     

    U 

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices