如何使用javascript搜索和替换iframe中的任何字符串？答案

【问题标题】：How to search and replace any string within iframe using javascript?如何使用javascript搜索和替换iframe中的任何字符串？
【发布时间】：2013-07-03 09:05:30
【问题描述】：

我想制作一个 js 来替换 iframe 中的期望文本。下面是我的代码：

        <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
       <title></title>
       <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script>
    <style>
        .header{
            width:100%;
            height:30px;
            background:#f1f1f1;
            position: fixed;
            z-index: 100;
            margin-top: -20px;
            font-family:Calibri, Arial;
        }
        .urlBox{
            margin-top: 4px;
            vertical-align: middle;
            width: 600px;
        }
        .btn{
            margin-top: 4px;
            vertical-align: middle;
        }
        #iframe1{
            margin-top:20px;
        }
        #newifrm{
        background-color: transparent;
        border: 0px none transparent;
        padding: 0px;
        overflow: hidden;
        margin-top: 20px;
    }
        .txt{
            margin-top: 4px;
            vertical-align: middle;
        }
        button{
        margin-top: 4px;
            vertical-align: middle;
            height:24px;
            width:33px;
        }
    </style>
    <script>
            function goAction(){

            ifrm = document.createElement("iframe"); 
           ifrm.setAttribute("src", document.getElementById("url1").value); 
           ifrm.style.width = 100+"%"; 
           ifrm.style.height = 100+"%"; 
           ifrm.frameBorder=0;
           ifrm.id="newifrm";
           document.getElementById("iframe1").appendChild(ifrm);
            }
    </script>
    </head>
    <body>
    <div class="header">
    <span><input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
    <span><input class ="btn" type="button" value="GO" onclick="goAction()"></span>
    <span><label for="search"> Search for: </label><input name="search" id="search" class="txt"></span><span><label for="replace"> Replace with: </label><input name="replace1" id="replace1" class="txt"></span>
    <span><input class ="btn" type="button" value="Replace" onclick=""></span>
    </div>
    <div id="content">
    <div id="iframe1"></div>
    </div>
    </body>
    </html>

我已经尝试了很多函数来获得替换值。我可以替换父文档的任何文本，但想要创建一个适用于 iframe 内容的函数。

【问题讨论】：

您有任何错误吗？我认为如果它是外部网站，则不允许您更改任何内容。

标签： javascript jquery search iframe replace

【解决方案1】：

您可以在jQuery Documentation 中找到有关如何修改 iframe 内容的示例：

<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <iframe src="http://api.jquery.com/" width="80%" height="600" id='frameDemo'></iframe> 
<script>$("#frameDemo").contents().find("a").css("background-color","#BADA55");</script>

</body>
</html>

你应该使用.contents()函数。

虽然这与调用内部站点的 iframe 完美配合，但如果您尝试修改外部站点，它将无法正常工作。这是一项安全措施，无法避免。你可以阅读更多关于它的信息here。

【讨论】：

【解决方案2】：

首先，如果您要更改 DOM，请务必使用 JQuery。据我了解，您想更改 iframe 的来源。因此，在对您的代码进行一些更改后，它就可以工作了：

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
  <div class="header">
    <span>
      <input id="url1" class="urlBox" type="text" value="http://anywebsitexyz.com"></span>
    <span>
      <input id="go" class ="btn" type="button" value="GO"></span>
    <span>
      <label for="search">Search for:</label>
      <input name="search" id="search" class="txt"></span>
    <span>
      <label for="replace">Replace with:</label>
      <input name="replace1" id="replace1" class="txt"></span>
    <span>
      <input class ="btn" type="button" value="Replace" onclick=""></span>
  </div>

  <iframe src="http://anywebsitexyz.com" width="100%" height="600" id="newifrm"></iframe>

  <script>
          $(document).ready(function(){
            $("#go").click(function(){
               $("#newifrm").attr('src', $("#url1").val());
            })
         });
  </script>

</body>
</html>

【讨论】：