在表单提交到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

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

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

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

注意Pointy答案的最后一篇文章 -

  

您可能还需要做其他事情，并且存在显着差异   是内容将成为主页的一部分而不是   隔离到一个单独的窗口。

如果您从加载的div中提交，则可能需要考虑此问题。

HTH