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）但是现在我需要有搜索输入框在父页面上，因为我要做到这一点＆＃34;粘性＆＃34;这样当它们向下滚动页面时它将跟随用户。我还使用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之上，所以我把它放在它下面以使它工作）所以这就是我想用搜索结果做的事情：

我打算使用搜索框输入一个页码，这样当用户点击＆＃34; Go＆＃34;搜索将查找该页面并将用户向下滚动到结果（即页码）所在的位置。

编辑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＆＃39;”时滚动到页面锚点。

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>

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

3 个答案: