jQuery在iframe内容上不起作用。

Question

我正在尝试使用jQuery在输入字段获得焦点时将CSS应用于标签，但似乎无效。联系表格加载在iframe内。如果不使用iframe，则正常工作-请查看此jsfiddle：http://jsfiddle.net/nN3w2/（如果iframe未加载，则服务器可能已关闭-但代码仍可供查看）。

iframe和联系表格位于同一域上。使用php将联系表格包含到我的网站中。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#iframe").contents().find("input").focus(function() {
        $("#iframe").contents().find("label").css('opacity','0');
    });
});
</script>

非 iframe。

<script type="text/javascript">
jQuery(document).ready(function($) {
    $("input").focus(function() {
       $("label").css('opacity','0');
    });

    $("input").focusout(function() {
         if($("input").val() ==="" ) {
           $("label").css('opacity','1');
        }
    });

});
</script>

- Tasos

---

只有当两个文档位于同一域上时，此代码才能正常工作：http://jsfiddle.net/doktormolle/Q7QuW/1/ - Dr.Molle

这个回答解决了你的问题吗？https://dev59.com/rVfUa4cB1Zd3GeqPEhz7#5976237 注意：你需要在iframe的“onload”事件中运行我们的代码，而不是当前文档的事件。 - Shea

我在jsfiddle上使用我的网站URL进行测试，所以它没有起作用。但现在它在我的域名上运行，谢谢。 - Tasos

Answer 1

不可能

如果iframe来自另一个域名，则无法将jQuery应用于其上。这是由于安全性的阻止。

进一步解释"不可能"...

"Same origin policies"适用：您与来自另一个[域|子域|协议|端口]的iframe内容通信的唯一途径是通过postMessage API，当然，这需要另一方（iframe内部的文档）监听您的消息。

在OP的评论后更新

也许你可以像这样做

$('#iframeOne', window.parent.document);

另一种方法

window.parent.$("#iframeOne");

另一种方法

$("#iframeOne", top.document);

如果您知道父窗口的名称，您也可以执行以下操作：

$("#iframeOne",opener.document)

这里的opener是窗口的名称。

- Tushar Gupta - curioustushar

---

但是iframe位于我的域上，联系表单的php文件也在其中，我仍然无法访问它？ - Tasos

我在jsfiddle上使用我的网站URL进行测试，所以它没有起作用。但现在它在我的域名上运行，谢谢。 - Tasos

这正是我所想的，所以我在顶部提到了“您无法将jQuery应用于其他域iframe。这是因为出于安全原因而被阻止。” - Tushar Gupta - curioustushar