使用 Jquery 更改 iframe 中的 div答案

【问题标题】：Changing div in iframe using Jquery使用 Jquery 更改 iframe 中的 div
【发布时间】：2012-09-18 19:51:33
【问题描述】：

我有一个“页面 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。如何在“页面 A”上创建一个 jQuery 调用，将这个 div 替换为另一个 div（其内容位于“页面 A”上），id 为 cTitle？

【问题讨论】：

如果有可能它会像$("iframe #dTitle").before($("#cTitle")).remove();
如果你想从它的父级访问 iframe 的内容，你必须避免产生同源策略限制；确保src 属于同一个域、相对位置或一些未定义的javascript（例如javascript:undefined;）。

标签： javascript jquery html iframe

【解决方案1】：

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

【讨论】：

【解决方案2】：

假设您没有违反同源政策，

1，给你的 iframe 一个 id - <iframe id="frm" src="javascript:undefined;"></iframe>
2、从框架中获取Window和HTMLDocument

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

3、检查 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';
}

看到这个fiddle。

【讨论】：

【解决方案3】：

只有当 iframe 域与父域相同时，您才能更改。如果是这样，那么您可以通过使用 contentWindow 属性从父窗口访问 iframe 来更改它。

【讨论】：

【解决方案4】：

去看看这个帖子Changing an element's ID with jQuery

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

【讨论】：

我认为他想要一个完整的元素替换

【解决方案5】：

如果您只想更改内容，请执行以下操作：

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

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：

【解决方案7】：

我认为 iFrame 可能是个问题，除非它们共享同一个父 DOM。然而，无论如何，只是为了好玩，我为你启动了这个快速简单的 jQuery 插件，它可能会有所帮助。

插件更新 _{返回replacement比返回旧元素更有意义，因此改变了}

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

【讨论】：

嗨 SpYk3HH，我非常感谢您为帮助我所做的努力。我尝试了您的解决方案，但不幸的是，尽管您做出了努力，但它似乎对我不起作用。我以 trello.com 为例做了一个小提琴：jsfiddle.net/noscirre/yYkUN
正如我开始提到的，您的主要问题是 iframe html 与调用 iframe 的 html 不在同一个 DOM 中。换句话说，trelo 和 jsfiddle 一起在两个不同的网络上。尝试访问不同 dom 上的 iframe 存在固有问题。想想看，如果你能做到这一点，那么什么会阻止某人设置一个黑客版本的视线，网址略有不同，基本上“盗版”整个网站。那不会很好