Changing text inside an iframe with JS

Question

I have an HTML page which loads some content in an iframe with the help of remote JS. I want to replace the text "premium content" with something else.

What I am trying is:

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="http://gaand.comli.com/no.js"></script>

<img src="psss" onerror="myFunction()"></img>
<script>
function myFunction() {
    var x = document.getElementById("overlay_iframe");
    var y = x.contentDocument;
    y.document.body.innerHTML = y.document.body.innerHTML.replace('premium', 

'newtext'); 
}
</script>
</body>
</html>

Is there any way to change it as soon as the page is loaded completely?

Milanche · Accepted Answer · 2014-08-28 17:33:27Z

1

You can use jquery to have event when page loads, and then replace html content.

$( document ).ready(function() {
   $( "#overlay_iframe" ).html( $( "#overlay_iframe" ).html().replace("premium","newtext"));
});

answered Aug 28, 2014 at 17:33

Milanche

213 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1111111111111 Over a year ago

Still not working. I can change text on a page easily. But in this case with iframe not working

Matthew · Accepted Answer · 2014-08-28 17:49:56Z

0

Unless the iFrame is on your server you cannot change it. I would suggest using PHP

file_get_contents()

and replacing it within the string.

answered Aug 28, 2014 at 17:49

Matthew

3075 silver badges18 bronze badges

Comments

Egregory · Accepted Answer · 2014-08-28 18:59:18Z

0

You can try using the jQuery .contents() to return an object of the iframes contents and than manipulate that. jQuery .contents()

answered Aug 28, 2014 at 18:59

Egregory

2182 silver badges9 bronze badges

Comments

guest271314 · Accepted Answer · 2014-08-28 19:47:09Z

0

Edit, updated

Try

$.getScript("http://gaand.comli.com/no.js")
.done(function(script) {
    s = setInterval(function() {
      $("iframe").contents()
      .find("body").text(function(_, o) {
         return o.replace("premium", "newText");
      }) && clearInterval(s);
    }, 10);
});

jsfiddle http://jsfiddle.net/guest271314/whjqqtco/

edited Aug 28, 2014 at 19:47

answered Aug 28, 2014 at 19:16

guest271314

1

7 Comments

user1111111111111 Over a year ago

it returns me a blank page without any frame

guest271314 Over a year ago

Tried without $.getScript() ? With script tag , as at OP ? Then setInterval piece in next script block ?

user1111111111111 Over a year ago

yes tried just now. Again I can see "Premium Content Area". Its no replaced by newText

guest271314 Over a year ago

If possible , can post iframe html ? Is piece inside of img's error function ? , or in separate script tag / block ?

user1111111111111 Over a year ago

img tag I just used to call the myfunction(). actually what I am trying to do is. when I use <script src="gaand.comli.com/no.js"></script> in an html. This no.js loads an iframe and I need to change the text in it using js. I dont have source for the iframe as its loaded with this JS.

|

Collectives™ on Stack Overflow

Changing text inside an iframe with JS

4 Answers 4

1 Comment

Comments

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related