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?

IF it is possible it will be something like `$("iframe #dTitle").before($("#cTitle")).remove();` — SpYk3HH, Sep 18 '12 at 19:55
If you want to access contents of an iframe from it's parent you must avoid incurring same origin policy restrictions; make sure `src` is to the same domain, a relative location or some undefined javascript (e.g. `javascript:undefined;`). — Paul S., Sep 18 '12 at 20:39

score 5 · Answer 1 · answered Sep 18 '12 at 20:05

5

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

answered Sep 18 '12 at 20:05

Anoop

23,044
10
62
76

score 3 · Answer 2 · answered Sep 18 '12 at 21:06

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.

score 1 · Answer 3 · answered Sep 18 '12 at 19:55

1

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.

answered Sep 18 '12 at 19:55

Neo

6,753
1
19
25

score 0 · Answer 4 · edited May 23 '17 at 11:46

0

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

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

edited May 23 '17 at 11:46

Community

1
1

answered Sep 18 '12 at 19:54

andres83

310
1
12

i think he wants a full element replace – SpYk3HH Sep 18 '12 at 19:55

score 0 · Answer 5 · answered Sep 18 '12 at 19:54

0

If you want to change just content then do this:

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

answered Sep 18 '12 at 19:54

thatidiotguy

8,701
13
60
105

score 0 · Answer 6 · answered Sep 18 '12 at 19:58

0

Try this:

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

answered Sep 18 '12 at 19:58

Nick

1,530
2
15
22

SpYk3HH · Answer 7 · 2012-09-19T16:38:34.700

0

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"));

edited Sep 19 '12 at 16:38

answered Sep 18 '12 at 20:23

SpYk3HH

22,272
11
70
81

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: http://jsfiddle.net/noscirre/yYkUN/ – user1038814 Sep 18 '12 at 20:53
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 – SpYk3HH Sep 19 '12 at 16:01

Changing div in iframe using Jquery

7 Answers7

Linked