Frames are bad and iframes are not much better, but sometimes you don’t have a choice. Two days ago I had to change classes in an element of an iframe. The normal way to do that with pure JavaScript would’ve been a bit tedious so I looked for an alternative provided by jQuery.

The following example shows some code somewhere within an iframe with the id content:

<h1>An example title</h1>
Some text that isn't  particularly interesting...
<ul>
  <li id="back">previous posts</li>
  <li id="forward" class="green">next posts</li>
</ul>

Apparently the list entry for next posts has the styles for a green button. That’s the way it should look most of the time, but in some cases it has to be red instead. We have to remove the class for the green color and add one for red. Using jQuery that’s done in only one statement:

$("#content")
  .contents()
  .find("#forward")
  .removeClass("green")
  .addClas("red");

It’s that easy because of jQuery’s contents() function. Normally the function returns all child nodes from the matched elements, but in case of an iframe you get the whole document that’s loaded into the iframe. Now you can use find() to locate the elements you need to work with and that’s it.

  • how to Getting the html content of an iframe using jQuery.. ?

    for
    —iframe src=”http://indowebsia.com/sepeda-motor-bebek-injeksi-kencang-dan-irit-jupiter-z1.php” width=”100%” height=”1024px” allowtransparency=” yes” scrolling=”no” style=”padding-top:400px;”></iframe—-

  • how to Getting the html content of an iframe using jQuery.. ?

    for

  • Существо домашних, офисных и операторских Ethernet сетей по медным или оптическим каналам связи. Устройства, обеспечивающие работу компьютерной тенета, составляют сетевое оборудование. Обычно в сетевое обстановка входит маршрутизатор, свитч-коммутатор, концентратор, патч-панель и другие устройства. Все будущий оборудования ради тенета разделяют для активное и пассивное. Беспроводное оборудование чтобы передачи данных.

  • “.addClas(“red”);”

    note: missing an “s”

  • Thank you for your comment, Jon. I really missed to mention that the frame has content as id. The post should be clearer now.

    Selecting a dynamically created id depends on the way it is created. If you can’t control that method or you can’t even set an id at all you have to find another way to identify the iframe. But identifying and selecting items on a page is completely different topic. Covering all possible options of generated ids would be a little much, but do you have a spedific issue?

  • Hmmmm….this tutorial is missing something. There is no element with the id=”content”

    I assume you mean the iframe has this id…but what if you can’t set an id for the iframe…for instance when the iframe is dynamically created?

Comment on this post