2016-07-18 4 views
-1

Как загрузить divs со страницы 2 на страницу 1 с помощью JavaScript.Получить контент с другой страницы с помощью JavaScript

Page2.html

<html> 
<head> 
<title> title </title> 
<body> 
<div id="main"> 
<div id="content2"> this is content2</div> 
<div id="content3"> this is content3</div> 
</div> 
</body> 
</html> 

Я хочу, чтобы получить и использовать Content2 ID из page2 создать DIV в page1 с содержанием этого DIV, после связь была нажата и удалена, и сделать то же самое с content3, content4 и последовательно.

page1.html

<html> 
<head> 
<title> title </title> 
<body> 
<div id="main"> 
<div id="content1"> this is content1</div> 
<a href="#"> get content</a> 
</div> 
</body> 
</html> 

И тогда будет так.

<html> 
<head> 
<title> title </title> 
<body> 
<div id="main"> 
<div id="content1"> this is content1</div> 
<div>this is content2</div> 
<div>this is content3</div> 
</div> 
</body> 
</html> 

Я новичок в JavaScript, и у меня нет идей, как это сделать. Если кто-то может помочь. Благодарю.

Отредактировано: Мне захотелось сделать это только с javascript и без jquery, если это действительно возможно. Я хочу, чтобы мой проект работал в автономном режиме, и я не могу сделать это с помощью jquery, потому что он не работает. Я загрузил плагин jquery и вставил его в свой каталог, но тоже не работал.

+1

Возможный дубликат [Получить содержание другой страницы в переменном с помощью AJAX] (http://stackoverflow.com/questions/20927573/get-another-pages-content-in-a-variable-with -ajax) –

+0

Изучите формы и публикации. Затем загляните в методы jQuery '.post()' или 'AJAX'. Они должны помочь вам начать ... – Zak

ответ

1

Для этого вы можете использовать JavaScript, jQuery и AJAX.

Во-первых, включить библиотеку JQuery:

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 

Затем написать функцию JavaScript, подобный этому, который заменит HTML содержание ваших div «ы с файлом Page2.html:

var loadNewContent = function { 
    $.ajax("Page2.html",{ 
    success: function(response) { 

     $("#content2").html(response); 


    } 
    }); }; 

И тогда вам понадобится «триггер» для запуска этой функции, такой как:

$("#content2").on('click",loadNewContent); 

Надеюсь, это поможет.

Смежные вопросы