How to manipulate iframe objects using jquery

Question

I've gone through lot of topics related to this question but unable to get the desired output.

I'm calling a iframe inside and html like this:

 <iframe class="full-screen-preview__frame" id="nitseditpreview" src="himu/index.php" name="preview-frame" frameborder="0" noresize="noresize" data-view="fullScreenPreview">

Suppose in this iframe I have h2 tag with a class name like this:

<body>
  <section id="about-us">
    <div class="container">
      <div class="text-center">
        <div class="col-sm-8">
          <h2 class="maincontent">
  Why with Us
  </h2>
        </div>
      </div>
    </div>
  </section>
</body>

As seen by the inspect element in browser

By using Jquery I want to manipulate this lets say for example I want to put border in this. I've tried a lot of things but I guess this thing will work if anyone fixes the bug, my jquery looks like this:

$(document).load(function () {
$('#nitseditpreview').load(function () { //The function below executes once the iframe has finished loading
    $this = $(this);
    $('#nitsmenu', this.contents()).css('border', 'solid 1px #777');
});

});

Don't know where I'm doing mistake, even I'm following same origin policy too.

Is the JS running inside or outside the ifrane?

Richard
– Richard

2016-04-27 12:46:33 +00:00
Commented Apr 27, 2016 at 12:46 — Richard
– Richard, Commented Apr 27, 2016 at 12:46
Outside the iframe

Nitish Kumar
– Nitish Kumar

2016-04-27 12:47:16 +00:00
Commented Apr 27, 2016 at 12:47 — Nitish Kumar
– Nitish Kumar, Commented Apr 27, 2016 at 12:47

Daniel Beck · Accepted Answer · 2016-04-27 13:23:26Z

1

If both framed and framing documents are on the same domain, there shouldn't be any need for sandbox attributes or CORS hoop-jumping. But there are a number of other errors here:

$(document).load(...) should be $(document).ready(...) (since it has already loaded by the time your script runs)
you define $this = $(this), but then in the next line try to use a bare this
You're trying to match a #nitsmenu that doesn't appear to exist in the framed document

The following appears to work, although I'm concerned there may still be a race condition on that iframe's .load():

$(document).ready(function() {
  $('#nitseditpreview').load(function() {
      $(this).contents().find('.container').css('border', 'solid 1px #777');
  });
});

http://plnkr.co/edit/tCEHdU0ckg5q4w4tPVFU

edited Apr 27, 2016 at 13:23

answered Apr 27, 2016 at 13:07

Daniel Beck

21.7k5 gold badges43 silver badges61 bronze badges

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

2 Comments

Nitish Kumar Over a year ago

Hey, thanks for the update, but this ain't helping me out..:(

Nitish Kumar Over a year ago

opps.. sorry I forgot to remove sandbox="allow-scripts". Now its working perfectly. thanks a ton..:)

Collectives™ on Stack Overflow

How to manipulate iframe objects using jquery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related