如何在iframe中编辑表单

Question

嗨，我有一个表单，我使用了jquery来给值提交按钮，它工作正常。

jQuery('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');

现在，将表单代码放置在wp super pop-up pro内部。 当我用萤火虫检查时，它是一个包含iframe的弹出插件

相同的jquery无法正常工作，因此我尝试了iframe所建议的contents() ，但这也未设置按钮值，这是我尝试过的代码

jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');

这里.sppro_cboxIframe是这样放置在iframe中的类

<iframe class="sppro_cboxIframe" frameborder="0" name="sppro_cbox1381566909072" src='url'>

当我查看来源时，无法看到上述iframe。

现在如何更改或向其中的表单添加值。 任何帮助将是感激的。

Answer 1

您将无法使用JavaScript从iframe外部操纵iframe中的元素。 关于相同的原产地政策，请参见以下答案：

jQuery / JavaScript：访问iframe的内容

检查该插件是否允许您将jQuery传递到iframe中。 这是您操纵iframe中的元素的唯一方法。

Answer 2

假设jQuery在<iframe>定义为$ ，传递相同的原点 ，并且<iframe>中的页面已开始加载，则可以通过它的contentWindow属性获取HTMLIFrameElement的Window引用。

// get the <iframe> and then it's contentWindow
var iWin = document.getElementsByClassName('sppro_cboxIframe')[0].contentWindow;
// now to use jQuery inside <iframe>
iWin.$.find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('');

Answer 3

您的代码很好，这是演示： http : //jsfiddle.net/T86yw/

jQuery('.sppro_cboxIframe').contents().find('#frm_f_container.with_frm_style .submit input[type="submit"]').val('New Value');

问题出在别的地方。 正如您所说的两个页面具有相同的来源一样，要检查的另一件事是在运行代码时是否已经加载了iframe。