CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Snappy
Snappy

Reputation: 203

Alert hidden text inside iframe using Javascript or jQuery

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.

Upvotes: 0

Views: 660

Answers (2)

zennith
zennith

Reputation: 410

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);
});

Upvotes: 1

ckruszynsky
ckruszynsky

Reputation: 533

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.

Upvotes: 1

Related Questions