Fancybox - 如何更改 iframe 的内容？

Question

我需要在 iframe fancybox 窗口中设置或更新自定义 HTML 代码。 那我该怎么做？！ “内容”选项不起作用！ 在本地主机上测试。

  $("test").fancybox({
  'width'    : 300,
  'height'   : 300,
        'autoScale'      : false,
        'type' : 'iframe',
        'content' : '<H5> It`s does not work</h5>'
 });

如果无法更改跨域 iframe 的内容（如我的情况），那么，请告诉我如何在同一个域上进行。 例如，我们在 http://localhost/page1.html 和 iframe 链接到 http://localhost/page2.html

Answer 1

当fancybox-iframe 已经打开时，您可以使用$('.fancybox-iframe') 访问iframe-element。

如果 iframe 内的文档位于同一个域中，您可以使用 jQuery 更改内容：

$('body',$('.fancybox-iframe').contents()).html('new content');

当fancybox-iframe还没有打开时，你可以在afterLoad-callback里面做同样的事情：

$("test").fancybox({
  'width'    : 300,
  'height'   : 300,
        'autoScale'      : false,
        'type' : 'iframe',
        'href':'page2.html',
        afterLoad:function(){$('body',$('.fancybox-iframe').contents())
                              .html('new content');}
 });

是的：跨域 iframe 的内容无法更改（在这种情况下，您只能将全新的文档加载到 iframe 中）。