JQUERY：在 change() / keyup() 上动态加载和更新 iframe 内容

Question

我已经在 drupal 中开发自定义 CMS 大约两三周了，但我一直遇到同样的问题。我正在尝试加载动态生成的 url（通过将目标 drupal 页面的节点 ID 提取到 $resultCut 并将其附加到网站的 baseurl 中）。这个 iframe 嵌入在 CKEditor 的实例旁边，其想法是在修改 CKEditor 中的字段时使 iframe 中的内容发生变化。我有以下 Jquery：

<script type="text/javascript">     
$(document).ready(function(){          
    baseurl = urlhere;
    url = baseurl+"<?php echo $resultCut ?>"
    $('#EmuFrame').attr('src', url); 
    var HTML = $('#EmuFrame').contents().find('body').html();
    alert ( "LOADING COMPLETE" + HTML );
});
$('#edit-field-mobile-page-header-label-0-value').change(function () { // writes changes to the header text to emulaor
    var curr = $(this).val();
    $('#EmuFrame').contents().find("h1").text(curr);
});
$('#edit-body').keyup(function(e)  { // writes changes to the body text to emulator
    var curr = $(this).val();
currhead = $('#EmuFrame').contents().find("h1").html();
$('#EmuFrame').contents().find('#content').html("<h1>"+currhead+"</h1>"+curr);
});

#EmuFrame 是 iframe 的 id，#edit-* 标签是 CKEditor 中我正在监视更改的字段的 id。当用户键入时，keyup() 或 change() 事件应该获取新的 html 并将其与 iframe 中的 html 交换。

截至目前，LOADING COMPLETE 警报触发，但警报中没有 html。但是，我注意到 iframe 的内容在警报触发后加载，这让我相信这是事件触发顺序的问题。

此外，我在 keyup 的回调函数中有一个警报，它返回了用户开始输入时生成的新 html [ alert(curr) ]，并且此警报返回 html（尽管它是从 CKEditor 获取的） .但是，iframe 不反映任何更改。但是，如果我附加 [ alert (currhead) ]，则根本不会发出任何警报。

请注意，源网址在技术上与父网址位于不同的域中。但是，我使用了一种解决方法（我很确定它有效，因为我之前已经让整个 html 替换工作正常工作，然后不知何故它坏了）。此外，Firebug 和 Chrome 的控制台都不会报告任何 XMLHttpRequest 错误。此外，我不断收到此错误：“未捕获的语法错误，无法识别的表达式：[@disabled]”，我不确定它是什么意思，以及它是否与上述我的问题有关。

这是一个非常长的求助请求，感谢您的阅读，感谢您的帮助！！

Answer 1

您关于跨域 iframe src 的注释令人担忧——您应该无法使用 javascript 访问其内容。尽管如此：

你有这两行快速连续：

$('#EmuFrame').attr('src', url); 
var HTML = $('#EmuFrame').contents().find('body').html();

尝试等待 iframe 先加载：

$('#EmuFrame').load(function() {
    var HTML = $('#EmuFrame').contents().find('body').html();
}