将表单提交到 iframe 后定位特定的 div。

Question

这是我的设置...

我有两个页面，index.html 和 cart.html。我在 index.html 上有一个表单，提交时会在弹出的 iframe 中加载 cart.html。这很好用。

当我将 cart.html 加载到 iframe 中时，它会加载整个 cart.html 页面，显示与 index.html 相同的页眉/菜单/背景。但这是一个问题，我需要能够将 cart.html 加载到 iframe 中，然后定位一个 ID 为“cart-content”的 div。我只需要显示那个 div 而不是整个页面。

解决方法是对cart.html 进行样式化，使其适合iframe，而没有标题/菜单/背景，但我需要能够在iframe 之外访问cart.html。

这是我的表格：

<form id="product-form" method="post" action="/cart">
<!-- BIG CARTEL CONTENT, NOT IMPORTANT -->
</form>

我正在使用 jQuery 插件 FaceBox 打开 iFrame。这是它的代码：

jQuery('#product-form').submit(function() {
    jQuery.facebox('<iframe name="targetbox"></iframe>');
    return true;
}).prop('target','target box')

所以在表单中我需要它的行为类似于“/cart#cart-content”有意义吗？希望有人能帮忙！谢谢

Answer 1

看看这个：iframe to Only Show a Certain Part of the Page

基本上，使用 load 函数加载 cart.html 页面，然后选择要显示的页面的 div - 即

$('#popUpDiv').load('path-to-my-page/cart.html #divToDisplay')

在这种情况下，#divToDisplay 是您要加载到弹出窗口中的一部分 cart.html 的 ID。

注意Pointy回答的最后一句-

您可能还需要做其他事情，并且有很大的不同 是内容将成为主页的一部分而不是 隔离到一个单独的窗口中。

如果您从加载的 div 提交，您可能需要考虑这一点。

HTH