Click here to Skip to main content
15,849,785 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I just nee a help .. no idea why this post is duplicated ... no one wanna to help

I'm new to iframes and I just want to know how to get specific `<li>` data after clicking on it.

Here is my Code:

**index.html**

HTML
<iframe src ="navigation.html" linkTarget = "iframe" scrolling="no" onload="resizeIframe(this)"></iframe>

So i calling this iframe from index ... and want to get `<li>` specific `<p>` element by clicked on one of them data(like menu you know...)

For Example


**navigation.html**

HTML
<ul>
    <li class="outset" >
        report link<br>
        <p>10210316_021938.html</p>
    </li>
    <li class="outset">
        report link<br>
        <p>20210316_021938.html</p>
    </li>
    <li class="outset">
        report link<br>
        <p>30210316_021938.html</p>
    </li>
    <li class="outset">
        report link<br>
        <p>40210316_021938.html</p>
    </li>
</ul>


So the general idea is get this specific value from iframe it could be:

10210316_021938.html

or

20210316_021938.html

or

30210316_021938.html

etc...

I need this values to use them in another iframe to make something like dynamical preview by clicking on this specific `<li>`


In the end i will Add new iframe that will looks like ::


I don't really need this, what Elite person , sent for me ... :::

JavaScript
window.addEventListener("click",function() {
    document.getElementById('myframe')
      .contentWindow
      .document
      .querySelectorAll("li.outset p")
      .forEach(p => console.log(p.textContent));
});


I just need to implement 'good click function' on my `<li>` element ...

After click on it i will specify which Value was got of this li ...

After i got this value i will use it like that to new Iframe ::


HTML
<iframe src ="../SourceFolderSample/{ValueFromIframe.html}" linkTarget = "iframe" scrolling="no" onload="resizeIframe(this)">


What I have tried:

I don't really need this, what Elite person , sent for me ... :::

JavaScript
window.addEventListener("click",function() {
    document.getElementById('myframe')
      .contentWindow
      .document
      .querySelectorAll("li.outset p")
      .forEach(p => console.log(p.textContent));
});

this code just getting all values of li -> p in WINDOW CLICK
in my self , i need get Specific value of CLICKED li -> p
Posted
Updated 19-Mar-21 1:00am
v3
Comments
Richard MacCutchan 19-Mar-21 5:52am    
Why not ask the "Elite person" that sent you the code?

1 solution

In your sample code you already have the elements on the screen that you need to bind the mouse click event listener to here:
.forEach(p => console.log(p.textContent));

So you need to amend this code to add an event listener for when the element is clicked. In order to do this, look at using the addEventListener()[^] method.
 
Share this answer
 
Comments
daniel2IT 19-Mar-21 6:43am    
I'm in progress to understand this ... so is it possible to detect and grab this value of iframe after clicking in specific ?
Chris Copeland 19-Mar-21 6:51am    
The code you've been provided already loops over the elements you're interested in within the iframe, so the p in the sample code is going to be the elements you need to bind the click event listener to. You just need to write the code which adds the event listener to the p element, calling a function which then prints the text.
daniel2IT 19-Mar-21 7:25am    
Helped me a lot, thanks :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900