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

How to search and replace any string within iframe using javascript?

本文关键字：任何 字符串 iframe 替换 何使用 javascript 搜索      更新时间：2023-09-26

我想制作一个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内容的函数。

您可以在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调用内部站点非常配合，但如果您尝试修改外部站点，它将不起作用。这是一种安全措施，无法避免。你可以在这里阅读更多信息。

首先，如果要更改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>
相关文章：