2013-12-07 1 views
0

Я пытаюсь использовать эту функцию, чтобы добавить следующий код:contentDocument не работает

function generateAlbumSelect() { 
     alert("test"); 
     var html=""; 
     html+="<select id='album_select' style='color:red; font-family:calibri; align:middle; width:430px; height:350px;text-align:center; padding: 10px; font-size: 1.4em; line-height: 1; border: 0; ' onchange='parent.generateTrackSelect(this.selectedIndex);' size=" + albums.length + ">"; 
     for(var i=0;i<albums.length;i++){ 
      html+="<option>"; 
      html+= albums[i].title; 
      html+="</option>"; 
     } 
     html+="</select>" 

     with(document.getElementById('albums_list_frame').contentDocument){ 
       open(); 
       write(html); 
       close(); 
      } 


    } 

К этому блоку - однако по какой-то причине он не работает, однако предупреждение («тест»); выполняет.

<body onload = "generateAlbumSelect();"> 
<form name = 'main'> 
    <div id="albums_list_frame" class = "panel_top"> 
     <h2>Album Listing</h2> 
    </div> 
+0

А где плавающий фрейм, и с помощью 'with' следует избегать. Это либо очень сложно, либо вы не знаете, что делаете? – adeneo

+0

@adeneo Я довольно новичок в HTML, у вас есть идея, как это исправить? – user2964960

+0

Нет, не совсем. 'contentDocument' является документом iFrame, а' with' - это то, что я, вероятно, видел, возможно, несколько раз, поэтому я действительно не знаю, что вы пытаетесь сделать? – adeneo

ответ

0

Я настоятельно рекомендую использовать jQuery; было бы выглядеть примерно так:

function generateAlbumSelect(albums) 
{ 
    var html = $('<select>') 
       .css({ 
         'color':'red', 
         'font-family':'calibri', 
         'align':'middle', 
         'width':'430px', 
         'height':'350px', 
         'text-align':'center', 
         'padding': '10px', 
         'font-size': '1.4em', 
         'line-height': '1', 
         'border': '0' 
        }) 
       .on('change', function(){ 
         generateTrackSelect(this.selectedIndex); // ?? 
        }); 
    $.each(albums, function(idx, val){ 
     html.append($('<option>').text(val.title)); 
    }) 

    $('#albums_list_frame').append(html); 
} 

$(document).ready(function(){ 
    var albums = [{title:'title1'}, {title: 'title2'}]; 
    generateAlbumSelect(albums); 
}) 

Несколько других замечаний:

  • устанавливаемыми сотовыми укладка на выбор не имеет смысла для большей части.
  • Вы, похоже, изначально хотели использовать iframe, но вы не можете создать форму вокруг iframe, iframe имеет контент с другой страницы.
  • jsfiddle пример: http://jsfiddle.net/3s32G/
Смежные вопросы