Fancybox - 如何更改 iframe 的內容？

Question

我需要在iframe 花式框窗口中設置或更新自定義 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 中）。