2013-03-10 6 views
-2

Динамически загружать страницу html внутри тега div с помощью JavaScript или jQuery.загрузить html-страницу в теге div с помощью динамического jquery

<html> 
<head> 
<title>Untitled Document</title> 
</head> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('#btn').click(function(){ 
     $('#div_content').html('C:/xampp/htdocs/ex1.html'); 
    }); 
}); 
</script> 
<body> 
<input type="button" id="btn" value="Load" /> 
<div id="d_content"> 
</div> 
</body> 
</html> 

Но это не работает ..

+0

Вы тестирования это на веб-сервере? – Daedalus

+0

i протестирован. Браузер отображает следующую ошибку «Uncaught SyntaxError: Неожиданный токен {" – Hari

+0

Покажите нам весь ваш код, пожалуйста. У блока, который у вас выше, не проблема. – Daedalus

ответ

2
$(document).ready(function(){ 
    $('#btn').click(function(){ 
     $('#div_content').load('html.page'); 
    }); 
}); 
+0

без ответа .. есть какой-либо другой способ ..? – Hari

0

Попробуйте это:

$(document).ready(function(){ 
$('#btn').click(function(){ 
$.get('page.html').success(function(data) 
{ 
    $('#div_content').html(data); 
}); 
}); 
}); 

page.html Заменить с вашей страницы

+0

Попробуйте это и ответьте ... –

+0

нет ответа .. есть какой-либо другой способ.? – Hari

0

Попробуйте это ..

$(document).ready(function(){ 
    $('#btn').click(function(){ 
     $('#div_content').html('page.html'); 
    }); 
}); 
+0

Предоставлено $ htmlcontent существует и содержит контент .. это сработает, но это не то, что задает вопрос. – Daedalus

+0

Изменен мой код. Надеюсь, теперь все в порядке. – Purus

+0

Закрыть, но я боюсь, что в этом все еще есть ошибка. – Daedalus

7

Проблема, с которой вы столкнулись, заключается в том, что javascript обрабатывает page.html как объект, получая доступ к свойству html. Что вам нужно сделать, это цитата строка, поэтому он рассматривается как было задумано .. как строка:

$('#div_content').load('page.html'); 

Update 1:

Прежде всего, что вы имеете выше называется jQuery. JQuery является Java-библиотекой, которую вы должны включить в голове тега, прежде чем вы можете использовать любого из методов объекта Jquery в:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> 

Вы должны включить эту строку в документе голове, чтобы получить доступ к методам и свойства объекта jQuery $.

Тот факт, что в настоящее время вы этого не делаете, является причиной того, что ваш код сломан и отказывается работать. Кроме того, в зависимости от вашей установки вы можете сами использовать файл jquery, и в этом случае вы его загрузите и разместите где-нибудь на своем сервере.

Во-вторых, C:\ не является вашим корнем в Интернете. localhost, поэтому, чтобы получить этот бит для работы, вам нужно будет использовать url 'ex1.html'. Вот и все. Поскольку ваш документ уже находится в корневой папке (или, по крайней мере, я думаю, это так), он должен иметь доступ к любым соседним файлам ... else.

Скажите, что ваш индексный файл находится в htdocs. Тогда ваш индекс будет localhost/index.ext (при этом ext будет использоваться любым расширением файла). А затем ex1.html был в другой папке, скажем, 'folder1'. Чтобы получить доступ к нему правильно в вашем коде jquery .. folder1/ex1.html.

И, наконец, теги сценария входят либо в голову, либо в тело.

+0

@ user1709672 Прежде чем я это сделаю, обновите свой вопрос с помощью текущего кода. – Daedalus

0

main.html

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
<title>Untitled Document</title> 
</head> 
<script> 

function check(){ 
$('#tar').load('test.html #target'); // here 'test.html' is a page and 'target' id a id of 'test.html' 
} 
    </script> 

<body> 
<input type="button" id="btn" value="Go" onclick="check();"/> 
<div id="tar"> 
</div> 
</body> 
</html> 

test.html

<html> 
<head></head> 
<body> 
<div id='target'> 
I am from test page. 
</div> 
</body> 
</html> 

Здесь я написал 2 HTML программы. Проблема была вызвана только функцией. я исправил, что & теперь работает отлично. Мы можем загрузить текстовый файл также: Пример:

function check(){ 
    $('#tar').load('test.txt'); // here 'test.txt' is a text file 
    } 
     </script> 
Смежные вопросы