Changing div in iframe using Jquery

Question

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?

Solution 1

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

Solution 2

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.

Solution 3

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.

Comments

[SpYk3HH]

i think he wants a full element replace

[user1038814]

Hi SpYk3HH, I am really grateful for the your efforts to help me. I tried your solution but unfortunately despite your efforts, it doesn't seem to work for me. I've made a fiddle using trello.com as an example: jsfiddle.net/noscirre/yYkUN

[SpYk3HH]

As i mentioned to start, your main issue there is that the iframe html is not in the same DOM as the html calling the iframe. In other words, trelo and jsfiddle are on two different networks all together. There is an inherent issue with trying to accress an iframe on a different dom. Think about it, if you could do this, then what would stop someone from setting up a hacked version of a sight, with slightly different url and basically "pirate" an entire website. That wouldn't be very nice