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

Question

I want to make a js to replace desire text within an iframe. Here is my code below:

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

I have tried lot of functions to get replaced value. I am able to replace any text of parent document but want to make a function that will work for iframe content.

Do you get any errors? I think you are not allowed to change anything if it is an external website. — putvande, Jul 05 '13 at 09:58

score 0 · Answer 1 · edited May 23 '17 at 11:58

You can find this example about how to modify an iframe content in jQuery Documentation:

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

You should use .contents() function.

Although this works perfectly with an iframe calling an internal site, it won't work if you try to modify an external site. This is a security measure and there's no way to avoid it. You can read more about it here.

score 0 · Answer 2 · edited Jun 02 '16 at 12:20

First of all, if you are changing the DOM, by all means use JQuery. From what I understood, you want to change the source of the iframe. So after a few changes of your code, this works:

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

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

2 Answers2