How can I search iframe content (text) using an input field that is on the parent page?

Question

Yes, I know something like this has been asked over here before and I have searched but the one that is closest to what I'm trying to achieve doesn't have an answer ( Search iframe content with jquery and input element on parent page ) and the one that does is making use of nested iframes ( Access the content of a nested Iframe ) and I didn't quite understand the solution (VERY new with javascript so please bear with me). Honestly, it's getting a bit frustrating (it's quite late over here) so I thought I might as well ask.

I have an iframe that displays a page from my site therefore the page is from the same domain. What I would like to do is to search the iframe for some text using javascript (not jquery). The search input box, however, is on the parent page.

I've done something similar to this before by putting the search input box in the page displayed in the iframe instead ( I followed this tutorial: http://help.dottoro.com/ljkjvqqo.php ) but now I need to have the search input box on the parent page because I going to make it "sticky" so that it will follow the user as they scroll down the page. I've resized the parent page height to be the same as the length of the page in the iframe by also using javascript.

So, my question is: How can I use javascript to search text that is in the iframe by using a search input box that is on the parent page?

My HTML so far:

        <input type="text" name="page_no" size="3"/>            
        <input type="submit" name="goto" value="Go"/>    

<iframe id='iframe2' src="http://example.com/files/<?php echo $filename;?>" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" onload="AdjustIframeHeightOnLoad()"></iframe>
        <script type="text/javascript">
function AdjustIframeHeightOnLoad() {    document.getElementById("iframe2").style.height = document.getElementById("iframe2").contentWindow.document.body.scrollHeight + "px"; }
function AdjustIframeHeight(i) { document.getElementById("iframe2").style.height = parseInt(i) + "px"; }

Not sure how to move on from there. I'd really appreciate some help.

Thanks in advance!

EDIT: The search works now (saw that I put the javascript above the html so I put it under it to get it working) so this is what I want to do with the search results:

I intend to use the search box to enter a page number such that when the user clicks "Go" the search will look for that page and scroll the user down to where the result (that is, the page number) is.

EDIT 2: I just thought I'd mention that my page numbers are written like this: -2- for page 2, -3- for page 3, etc.

Answer 1

I believe this is the solution you need,

HTML:

<!--added an id of search to the input element-->
<input id="search" type="text" name="page_no" size="3"/> 

<!--changed input type to button and added an id of go-->           
<input id="go" type="button" name="goto" value="Go"/>    

<iframe id='iframe2' src="iframe.html" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" ></iframe>

Javascript(make sure the iframe is in the same domain):

//on click event for the button with an id of go
var go = document.getElementById("go").onclick = function(){//begin function

//get the search value
var search = document.getElementById("search").value;

 //get the html of the iframe(must be in the same domain)
 var iframe = document.getElementById("iframe2").contentDocument.body;

 /*create a new RegExp object using search variable as a parameter,
 the g option is passed in so it will find more than one occurence of the
 search parameter*/                                               
 var result = new RegExp(search, 'g');




 //set the html of the iframe making the found items bold
 iframe.innerHTML = iframe.innerHTML.replace(result,"<b>" + search + "</b>" );     



};//end function

Here is a link that will explain some additional flags you can use with the RegExp object. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

Below is an improved version of Javascript to scroll to Page Number. Place it inside of your on click event for the go button. The code requires that you place an id with the page number inside of an element at the top of each page. Example <h3 id="3">Page 3</h3>.

//get the search value
var search = document.getElementById("search").value;

//get the id of the search term
var iframe = document.getElementById("iframe2");

//the url of the page loaded in the iframe
var iframeURL = "iframe.html";

//set the source of iframe appending a link to an element id
iframe.src = iframeURL + "#" + search;

Answer 2

Solved! Thanks Larry Lane for your help.

Here is the present Javascript. Hope it helps someone.

<script type="text/javascript">//on click event for the button with an id of go
var go = document.getElementById("go").onclick = function(){//begin function

//get the search value
var search = document.getElementById("search").value;
//put hyphens for the page number
var pagehyph = '-' + search + '-';

//get the html of the iframe(must be in the same domain)
var iframe = document.getElementById("iframe2").contentDocument.body;

//remove the hash from the iframe src if there is one
var url = document.getElementById("iframe2").src, index = url.indexOf('#');
if(index > 0) { 
  var url = url.substring(0, index);
}

var newurl = url + "#" + search;

/*create a new RegExp object using search variable as a parameter,
the g option is passed in so it will find more than one occurrence of the
search parameter*/                                               
var result = new RegExp(pagehyph, 'g');


//set the html of the iframe and add a page anchor
iframe.innerHTML = iframe.innerHTML.replace(result,"<a id='" + search + "'>" + search + "</a>" );

//set new src for the iframe with the hash
document.getElementById("iframe2").src = newurl;

};//end function
</script>

As you can see from the code, I've added a page anchor so the page scrolls to the page anchor when they click 'Go'.

Answer 3

function myFunction(x) {
  var att = document.querySelector("iframe[id=iframe2]").getAttribute(x);
  
  alert(att);
}

<input type="text" name="page_no" size="3"/>            
<input type="submit" name="goto" onclick="myFunction(document.querySelector('input[name=page_no]').value)" value="Go"/>

<hr />

<iframe id='iframe2' src="https://www.example.com" frameborder="0" style="text-align:center; margin:0; width:100%; height:150px; border:none; overflow:hidden;" scrolling="yes" ></iframe>