如何从内嵌框架中获取选择框的选定值并在外部显示？

Question

我在HTML中有一个选择框，并且该页面通过iframe加载到另一个页面中（都在我的网站上）。我希望能够从选择框（位于iframe内部）中获取所选值并在外部显示。这里是我拼凑出来的一些代码，但我不知道是否正确：

<script>
$('#iframe').contents().find('#cds').change(function() {
    var selectVal = $(this).val();
    url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on'; 
    $("twitter").attr("id", url);
});
</script>

有什么建议吗？

澄清一下

• 我的 <select> 元素在 iframe 中
• 我想要在 iframe 外部显示所选值
• iframe 的源与加载它的页面在同一个域中

- user2230111

---

出了什么问题？你收到任何错误吗？请注意，iFrame 必须在同一个域上... - maxedison

它们都在同一个域上，但什么也没有发生，所以我不知道是我的脚本有问题，还是做这件事的方法不对。 - user2230111

$('twitter') 应该在前面加上 .（类）或 #（ID） - Mottie

@mplungjan - 反转一下；从URL转换为ID :) - Zachary Kniebel

@mplungjan 这是由于我的Adobe Air应用程序访问页面的方式，这是我唯一能做到的方式。 - user2230111

Answer 1

我不确定你的HTML代码长什么样，但是

$("twitter").attr("id", url);

应该是这样的：

应该是：

$(".twitter").attr("id", url);

---

更新：尝试使用此代码...您需要检测iframe是否已加载（演示）

$(function () {
    // define this here because we're changing the ID
    var $twitter = $('#twitter');
    // bind to select inside iframe
    $('#iframe').on('load', function () {
        $(this).contents().find('#cds').change(function () {
            var selectVal = $(this).val();
            url = 'https://twitter.com/intent/tweet?button_hashtag=stream&text=Just enjoying ' + selectVal + ' on';
            $twitter.attr("id", url).text(url);
        }).change(); // trigger change to get initial value
    });
});

另外，由于我们正在更改Twitter的ID，因此需要保存该jQuery对象。

- Mottie

---

只有一件事（非常抱歉），但我正在尝试在同一页上使用jwplayer播放列表做同样的事情，但布局不同（因为它更像是动态div而不是选择框），我该怎么做呢？这是结构：<div class="jw_playlist_playlist"><div class="jw_playlist_item even">item</div><div class="jw_playlist_item odd">item2</div></div> - user2230111

由于 div 是动态的，你需要找出它在哪里被更新，并使用回调或触发事件来获取这些更新。最好打开一个新问题，附上代码和更多关于播放列表如何更新的细节。 - Mottie

嗯，我明天得去做那个了。谢谢！ - user2230111