CODEWITHSUNDEEP
javascriptjqueryhtmliframe
user1038814
user1038814

Reputation: 9647

Changing div in iframe using Jquery

I have a "Page A". In this page is an iframe which displays "Page B". 

<iframe id="iframeD" src="https://trello.com" width="600" height="600">
  <p>Your browser does not support iframes.</p>
</iframe>
<div id="cTitle">Hello</div>​

(See the following fiddle for a working example: http://jsfiddle.net/noscirre/yYkUN/)

"Page B" contains a div with id landingHeader. How can I create a jQuery call on "Page A" replace this div with another div (whose content is found on "Page A") with id cTitle?

Upvotes: 2

Views: 11001

Answers (7)

SpYk3HH
SpYk3HH

Reputation: 22570

I think the iFrame might be an issue unless both share the same parent DOM. However, regardless, just for fun, i kicked up this quick and simple jQuery plguin for ya that could help.

Plugin updated It makes more sense to return the replacment than the old element, thus changed

$(function() {
    if (!$.replaceWith) {
        $.extend({
            replaceWith: function(ele, newEle) {
                ele.each(function(i) { $(this).before(newEle).remove(); });
                return newEle;
            }
        });
        $.fn.extend({
            replaceWith: function(newEle) { return $.replaceWith($(this), newEle); }
        });
    }
});

Simple USE 

$("#someElementID").replaceWith($("#anotherElementID"));
// or
$.replaceWith($("#someElementID"), $("#anotherElementID"));

For Instance:

$("#dTitle").replaceWith($("#cTitle"));

Upvotes: 0

Paul S.
Paul S.

Reputation: 66304

Assuming you're not violating the same origin policy,

1, Give your iframe an id - <iframe id="frm" src="javascript:undefined;"></iframe>​
2, Get the Window and HTMLDocument from the frame

var iWin = document.getElementById('frm').contentWindow,  
    iDoc = iWin.document;

3, Ceck for existance of jQuery in iframe

if( ! iWin.$ ){
    var jq = iDoc.createElement('script');
    jq.type = 'text/javascript';
    jq.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';
    jq.onload = ready;
    iDoc.head.appendChild(jq);
}else{
    ready(); // the stuff you want to do
}

4, Do what you want with jQuery

function ready(){
    var div = iWin['$']('#frm_div')[0]; // example from fiddle
    div.textContent = 'bar';
}​

See this fiddle.

Upvotes: 3

Anoop
Anoop

Reputation: 23208

 $("iframe").contents().find("#dTitle").attr('id','cTitle').html($('#cTitle').html());

Upvotes: 5

Nick
Nick

Reputation: 1570

Try this:

 $("#iFrame").contents().find("#dTitle").attr('id','cTitle');

Upvotes: 0

Neo
Neo

Reputation: 7081

You can change so only if the iframe domain is same as the parent domain. If it is so then you can change it by accessing the iframe from the parent window using the contentWindow property.

Upvotes: 1

thatidiotguy
thatidiotguy

Reputation: 8971

If you want to change just content then do this: 

$("div#bTitle").html($("div#cTitle").html());

Upvotes: 0

andres83
andres83

Reputation: 310

Go and check this post Changing an element's ID with jQuery

$(this).attr("id","newId");

Upvotes: 0

Related Questions