Question

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

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

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

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

2 个答案: