使用jQuery在IFRAME改变DIV(Changing div in iframe using

我有一个“页面A”。 在这种页是一个iframe ，其显示“页面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>​

（参见工作实施例以下小提琴： http://jsfiddle.net/noscirre/yYkUN/ ）

“网页B”包含div id为landingHeader 。 如何创建的“第一个” jQuery的调用替换此div与另一div （其内容的“第一个”中）和ID cTitle ？

Answer 1:

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

Answer 2:

假设你不违反同源策略 ，

1，给您的iframe一个id - <iframe id="frm" src="javascript:undefined;"></iframe>​
如图2所示，把Window和HTMLDocument从帧

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

3，Ceck用于iframe中的jQuery所有脑干

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，你想用jQuery什么

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

看到这个小提琴 。

Answer 3:

您可以因此，只有改变，如果iframe的域是同父域。 如果是这样，那么你可以通过使用contentWindow财产父窗口访问的iframe更改。

Answer 4:

去检查这个职位与jQuery更改元素的ID

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

Answer 5:

如果你想改变只是内容，那么这样做：

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

Answer 6:

尝试这个：

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

Answer 7:

我觉得iFrame的可能是，除非双方共享相同的父DOM的问题。 然而，不管，只是为了好玩，我踢了对雅本快速和简单的jQuery plguin，可以帮助。

插件更新 _{更有意义返回replacment比旧的元素，从而改变}

$(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); }
        });
    }
});

简单的使用

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

例如：

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

文章来源: Changing div in iframe using Jquery