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

Question

是的，我知道以前在这里有人问过这样的问题，我已经搜索过，但是最接近我想要实现的目标没有答案（Search iframe content with jquery and input element on parent page），而那个没有答案正在使用嵌套的 iframe（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

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>

Answer 2

解决了！感谢拉里·莱恩的帮助。

这是当前的 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

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

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;