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

我想讓一個js替換iframe中的願望文本。這裏是我的代碼如下：如何使用JavaScript搜索和替換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內容的功能。

來源

2013-07-05 Achal Jain

您是否收到任何錯誤？如果是外部網站，我認爲你不能改變任何東西。 – putvande

您可以找到有關如何在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。

來源

2013-07-05 10:00:26 Alvaro

首先，如果您要更改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>

來源

2013-07-05 10:30:28

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

回答

相關問題