Alert hidden text inside iframe using Javascript or jQuery

Question

Code inside iframe is loaded on windows load. However, contents of body loads after button click. And div with id="headers" is hidden but shown on another link click.

What I want is to access and alert Some Id on click search button.

How can I achieve this using Javascript or jQuery?

JSFiddle

Here is my Html code:

<html>
  <head>
    <title>TODO</title>
  </head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <body>
    <div id="btn">
      <button id="btn-search">Search</button>
    </div>
    <div class="iframebox">
      <iframe id="messageiframe" srcdoc='
       #document

        <!DOCTYPE html>
        <html>

        <head>
          <title>test</title>
        </head>

        <body class="full-height">

          <div id="preview">
            <ul id="list">
              <li class="mail"><a href="https://mail.gmail.com">Gmail</a></li>
              <li class="search"><a href="https://www.google.com">Google</a></li>
              <li class="mail"><a href="https://mail.outlook.com">Outlook</a></li>
              <li class="search"><a href="https://www.bing.com">Bing</a></li>

            </ul>
          </div>

      <div id="all" style= "display: none;">
      <div id="headers">
      <font class="bold">Path</font>
      "Some path"
      <br>
      <font class="bold">doc Id</font>
      "Some Id"
      <br>
      <font class="bold">Recieved</font>
      "Me"
      </div>
      </div>

        </body>

        </html>'>
      </iframe>
    </div>
  </body>

</html>

Here is my Javascript code which is incomplete:

$('#btn-search').on('click', function() {
   // slight delay 
   setTimeout(function(){
         var links = [];
     var iframe = document.getElementById('messageiframe');
     iframe.contentWindow.onload = function(){
     var innerDoc = iframe.contentWindow.document;
 };

   },100);
});

Any help is appreciated. Thanks in advance.

"What I want is to access and alert Some Id without clicking link." When you want to access Some Id? — zennith
– zennith, Commented Jul 13, 2017 at 12:26
Sorry, I forgot to mention.I want it on button search click. — Snappy
– Snappy, Commented Jul 13, 2017 at 12:28
could you elaborate a little more on what you are trying to achieve when the search button is clicked? I am assuming on the click of the search button your wanting to show an alert or do some action and retrieve a value for an element that is inside the iframe? Is that correct? Just want to make sure I understand the question — ckruszynsky
– ckruszynsky, Commented Jul 13, 2017 at 12:35
Yes you are right. I want to alert text "Some Id" which is inside iframe <div> with id headers — Snappy
– Snappy, Commented Jul 13, 2017 at 12:39

ckruszynsky · Accepted Answer · 2017-07-13 12:53:25Z

1

I updated your fiddle here: https://jsfiddle.net/qLrohftb/1/

I modified your code slightly by removing the onload method is unnecessary. To get the inner document I modified your code to do this :

var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

then once you have the document all you have to do is use innerDoc.getElementById or innerDoc.getElementByClassName or whichever method you want to use to retrieve the value from within the iframe. So in the example I get the element with className mail :

var element = innerDoc.getElementsByClassName("mail")[0];

Then once I have the element I show the alert dialog.

answered Jul 13, 2017 at 12:53

ckruszynsky

5333 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Snappy Over a year ago

I just want to alert "Some Id" which is inside "<div id = "headers">

ckruszynsky Over a year ago

I have updated the fiddle to get the element headers and output the html jsfiddle.net/ckruszynsky/qLrohftb/5

Snappy Over a year ago

nice. is there a way to extract specific text like "Some Id" from element.outerText ?

zennith · Accepted Answer · 2017-07-13 13:25:36Z

1

This is what you want? updated fiddle

$('#btn-search').on('click', function() { 
 // slight delay 
a= $('#messageiframe').contents().find('#headers ').find('font:eq(1)')[0].nextSibling.nodeValue
alert(a)
setTimeout(function(){
     var links = [];
 var iframe = document.getElementById('messageiframe');
 iframe.contentWindow.onload = function(){
 var innerDoc = iframe.contentWindow.document;
};

},100);
});

edited Jul 13, 2017 at 13:25

answered Jul 13, 2017 at 12:37

zennith

4102 gold badges5 silver badges17 bronze badges

2 Comments

Snappy Over a year ago

you need to tell me how I can add id='someid' to that specific text using jQuery.

Snappy Over a year ago

Thanks @zennith. Is there a why to trigger this method after iframe contents are loaded. As iframe contents takes some time to load.

Collectives™ on Stack Overflow

Alert hidden text inside iframe using Javascript or jQuery

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related