Fancybox ajax 弹出窗口 - 完整 HTML 还是只是内容?

Fanxybox ajax popup - full HTML or just content?

我创建了一个网站,它使用 Fancybox 来显示 ajax 弹出窗口(主要是表单)。这些弹出窗口的内容是从 PHP 文件加载的。一切正常。

我的实际问题是:Fancybox 弹出页面是否应该包含

A) 完整 HTML(带有文档类型、头部、css-包含等),或

B) 只是表单的 HTML,类似于 Fancybox 的内联版本。 Fancybox 文档在他们的示例中使用了它。

我已经对两者进行了测试,它们都有效,但有细微差别:

这就是我倾向于选择选项 a 的原因,但我是否遗漏了什么?是我没有考虑的问题吗?我不想使用内联版本,因为页面上有很多表单,一次使用的很少。

您应该考虑一些细微的差异:

1).当您通过 ajax 加载内容时,内容将成为您当前文档的一部分,并且 ajaxed 元素将受到 CSS 和 JS 的影响加载内容的(父)页面的设置。

换句话说,您想要从 ajaxed 内容(理想情况下)中获得的任何(CSS 和 JS)功能需要事先在父页面中初始化(使用 delegated 形式)或在 fancybox 回调中初始化它们(afterShow for fancybox v2.x)

在这种情况下,返回的内容(来自 php 文件)不需要完整结构(DOCTYPE<head><link><script> 标签)但内容正文的 HTML 元素。

底线:父页面和 ajax 内容成为一个文档(尽管 ajaxed 元素将从 DOM关闭 fancybox 后)

注意:ajaxed 页面中的元素可能会影响父页面中的元素或与父页面中的元素发生冲突。

2).另一方面,您可以拥有一个独立且功能齐全的页面(DOCTYPE<head><link><script> 标签等),并带有自己的 CSS 和 JS 功能。

本页面可以通过iframe方式加载到fancybox中,其DOM元素不受CSS和JS设置的影响父页面(父页面中的元素也不会受到 iframed 页面中元素的影响)

底线:无论视图如何,父页面和 iframe 内容都是两个独立的文档。

what do you need to use?

如果您不想在父页面中加载和初始化许多脚本,您可能想要使用 iframe,但这是一个有很多答案的问题,由您决定什么是最好的。