Question

我有一个HTML文档（here），它为相册中的歌曲集合创建了一个基于iframe的媒体播放器（为了简单起见，我只是使用字母来定义mymusic数组中的这些专辑和歌曲）

关注前三名iframe，我设置用户互动的方式是使用Javascript为可用专辑和歌曲的形式生成HTML，并将它们写入正文中的iframe。如果您运行它并在相册菜单中进行选择，您会看到歌曲菜单中的选项与mymusic数组相对应，因此这样可行

但是，当我选择一首歌时，应使用歌曲表单中的nowplaying(trackindex,albumindex)事件调用函数onchange，方法与使用生成的表单中的方式相同showinitial() ...但是函数没有被调用。

我排除了nowplaying本身的编码原因，因为即使我将nowplaying更改为alert("hello")，也不会被调用。所以这让我认为问题在于“任何事物”中的onchange属性，但我看不出问题。我编写它的方式与之前没有什么不同，并且工作正常，为什么这不起作用？

任何帮助将不胜感激！

Answer 1

Firebug是你的朋友......

我没有定义

功能   onchange（event）{   parent.nowplaying（this.SelectedIndex，   一世）; }（改变）

onchange正在调用，但在调用nowplaing时没有定义。

这是此行的结果：

p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.SelectedIndex,i);' size='";

在字符串中使用“i”，它应该将其作为变量附加：

p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.SelectedIndex," + i + ");' size='";

为了澄清，我被定义为什么时候（i）被调用，但你不是把我写入代码，只是字母i。当调用nowplaying（this.SelectedIndex，i）时，不再定义i，因为你不再位于anything（）函数内部。当你将html追加到p时，你需要展开i，这样值就在那里，而不是变量i。

Answer 2

function anything(i){
    p+="...<select onchange='parent.nowplaying(this.SelectedIndex,i);'...";

您的onchange事件处理程序是从字符串设置的。运行时，它将无法访问i，这是anything函数中的一个局部变量，该函数早已消失。

简单的修复方法是：

    p+="...<select onchange='parent.nowplaying(this.SelectedIndex,'+i+');'...";

将字符串制作时的i的当前值转换为字符串内的整数文字。

但是，从字符串创建代码通常不是一个好主意。将事件处理程序编写为普通函数对象通常更好：

// You will need the below workaround to get the iframe document in IE too
//
var iframe= document.getElementById('songs');
var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;

idoc.open();
idoc.write(s);
idoc.close();

idoc.getElementsByTagName('select')[0].onchange= function() {
    // This is a closure. The 'i' variable from the parent 'anything' function is
    // still visible in here
    //
    parent.nowplaying(this.selectedIndex, i);
};

但是，您通常希望避免在另一帧上设置处理程序。除了头痛之外，我不确定iframe会让你在这里获得什么。为什么不只是简单地使用溢出的定位div？如果你需要，你仍然可以通过innerHTML重写他们的内容......虽然我更愿意使用DOM方法填充它们，以避免当前脚本出现的所有HTML注入问题。

onchange属性不会调用函数

2 个答案: