Расчет суммы из таблицы в iframe

Question

У меня есть главная страница и подстраница (кадр). Фрейм содержит таблицу, содержащую числа в столбце. Я хочу суммировать эти цифры и получить результат с главной страницы.

Теперь моя проблема только в том, что я не знаю, как получить доступ к <input> s в таблице фреймов.

<iframe id="iframe_form" name="iframe_form" src="ServicesList_guest_form.php" 
frameborder=0 style="width:540px;height:900px;position:absolute;top:710px;" ></iframe> 

Файл ServicesList_guest_form.php содержит

... 
<form id="f1" action="save.php" ...> 
    <table id="mytable" ... > 
    <tr><td><input type="number" name="val1"></td></tr> 
    <tr><td><input type="number" name="val2"></td></tr> 
    <tr><td><input type="number" name="val3"></td></tr> 
    ... 
    </table> 
</form> 
... 

Спасибо за помощь

Answer 1

Вы можете получить доступ к документу в IFrame с помощью следующей (IE8 или более поздней версии), см MDN iframe documentation

• $ («#iframe_form») получает обертку jQuery
• [0] получает, лежащий в основе DOM ссылка
• .contentWindow.document является документом

Как это

var innerDoc = $("#iframe_form")[0].contentWindow.document; 

Затем вы можете использовать JQuery, чтобы найти элементы

console.log($(innerDoc).find("#mytable input")); 

Суммирование может быть выполнено путем петли

var total = 0; 
$(innerDoc).find("#mytable input").each(function(index) { 
    var value = parseInt($(this).val(), 10); 
    if (! isNaN(value)) { // just in case field is empty or user garbage 
     total += value; 
    } 
}); 
console.log(total);