Переменная jQuery в качестве URL-адреса iframe

Question

Почему этот скрипт не работает?

$(function() {
    var isbn = $('input').val();
    $('button').click(function() {
        $("#data").html('<iframe height="500" width="1000" src="http://books.google.com/books?vid=ISBN' + isbn + '" />');
    });
});

Как видите, я пытаюсь создать чрезвычайно простое поле поиска ISBN для демонстрационного веб-сайта. Предполагается, что скрипт берет значение ввода и вставляет его в URL. Почему не работает?

Кроме того, есть ли лучший способ достичь этой цели?

Конечно, я понимаю, что фреймы - это мусор, но я просто хочу, чтобы все было просто.

Answer 1

Неясно, когда ваш код вызывается, но есть ли эта строка:

var isbn = $('input').val();

вызывается только один раз во время загрузки страницы, тогда как он должен быть в обработчике кликов:

$('button').click(function() {
    var isbn = $('input').val();
    $("#data").html('<iframe height="500" width="1000" src="http://books.google.com/books?vid=ISBN' + isbn + '" />');
});

Answer 2

проблема не в вашем коде, а в строке запроса.

Пожалуйста, измените следующим образом, и это должно работать:

var isbn = "1603038159";

        $("#data").html('<iframe height="500" width="600" src="http://books.google.com/books?as_isbn=' + isbn);

Answer 3

Почему бы не загрузить страницу, которую вы хотели просмотреть, с помощью техники загрузки ajax, поэтому извлекаете html и отображаете ее внутри элемента:

$(function() {
    var isbn = $('input').val();
    $('button').click(function() {
        $("#data").load('http://books.google.com/books?vid=ISBN' + isbn);
    });
});