如何使用父页面上的输入字段搜索iframe内容（文本）？

Question

是的，我知道之前已经在这里询问了类似的事情并且我已经搜索了但是最接近我想要实现的那个没有答案（Search iframe content with jquery and input element on parent page）而且那个做的是利用嵌套iframes（Access the content of a nested Iframe）和我不太了解解决方案（非常新的javascript所以请耐心等待我）。老实说，它有点令人沮丧（这里已经很晚了）所以我想我也可以问一下。

我有一个显示我网站页面的iframe，因此页面来自同一个域。我想要做的是使用javascript（而不是jquery）搜索iframe中的某些文本。但是，搜索输入框位于父页面上。

我之前做过类似的事情，将搜索输入框放在iframe中显示的页面中（我按照本教程：http://help.dottoro.com/ljkjvqqo.php）但是现在我需要在父页面上设置搜索输入框，因为我要制作它“粘性”，以便在用户向下滚动页面时跟随用户。我已经通过使用javascript将父页面高度调整为与iframe中页面的长度相同。

所以，我的问题是：如何使用javascript通过使用父页面上的搜索输入框来搜索iframe中的文本？

到目前为止我的HTML：

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

不知道如何继续前进。我真的很感激一些帮助。

提前致谢！

编辑：搜索工作现在（看到我把javascript放在html之上，所以我把它放在它下面以使它工作）所以这就是我想要的搜索结果：

我打算使用搜索框输入页码，这样当用户点击“开始”时，搜索将查找该页面并将用户向下滚动到结果（即页码）所在的位置。

编辑2：我只是想提到我的页面编号是这样写的：-2-用于第2页，-3-用于第3页，等等。

Answer 1

我相信这是你需要的解决方案，

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（确保iframe位于同一个域中）：

//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

这是一个链接，它将解释一些可以与RegExp对象一起使用的其他标志。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

下面是滚动到页码的Javascript的改进版本。将其放在点击事件的go按钮内。该代码要求您在每个页面顶部的元素内放置一个带有页码的id。例子<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

解决了！感谢Larry Lane的帮助。

这是现在的Javascript。希望它可以帮助某人。

<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>

从代码中可以看出，我添加了一个页面锚点，以便页面在单击“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>