Как я могу добавить html-файл на свою страницу, нажав кнопку?

Question

Я пытаюсь получить страницу с простой кнопкой, которая будет загружать содержимое другой html-страницы при щелчке.

<input type="button" value="Create a square" id="send" onClick="createaquare()" /> 

Что я хочу, что, когда я нажимаю на кнопку, функция создать квадрат, который называется загружает другой HTML-файл, содержащий простой квадрат.

<div></div> 

<style type="text/css"> 

div 
{ 
    height : 200px; 
    width : 200px; 
    background: red; 
    opacity : 0.3; 
} 

И каждый раз, когда я нажимаю на кнопку, появится еще один квадрат. Как это возможно, используя javascript или jquery, ajax или anyting?

Спасибо

Answer 1

Вместо того, чтобы нести другой HTTP-вызов и сложность необходимости получать содержимое файла, которое всегда будет одинаковым, гораздо лучше просто создать квадраты при нажатии кнопки.

Предоставляя всем новым divs свой собственный класс CSS, вы можете одинаково стилизовать их, оставив все оригинальные divs в одиночку.

Для того, чтобы быть ясным, в моем примере я добавляю один и тот же контент к каждому новому квадрату, но если вы должны добавить условную логику к обработчику событий click, вы можете создать другой контент в разных квадратах в соответствии с вашими собственными логика.

Внесите содержимое в квадраты, используя свойство textContent, если это просто текст, который вы хотите добавить, и используйте свойство innerHTML, если вы хотите добавить контент, который необходимо разобрать (т. Е. Ваш контент содержит разметку - например, когда я добавьте текст «ESPN» к ссылке, я также добавляю элемент HTML <br>).

var btn = document.getElementById("btnMakeSquare"); 
 

 
var counter = 1; 
 

 
btn.addEventListener("click", function(){ 
 

 
    // Create a new square and configure it: 
 
    var newSquare = document.createElement("div"); 
 
    newSquare.id = "newDiv" + counter; 
 
    newSquare.textContent = newSquare.id; 
 
    newSquare.setAttribute("class", "newDiv"); 
 
    
 
    // Now create content for that square (this can be anything) 
 
    var newLink = document.createElement("a"); 
 
    newLink.href = "http://espn.com"; 
 
    newLink.innerHTML = "<br>ESPN"; 
 
    newLink.id = "link" + counter; 
 
    
 
    // Put the link into the square: 
 
    newSquare.appendChild(newLink); 
 
    
 
    // Bump up the counter: 
 
    counter++; 
 
    
 
    // Inject the square (which now contains a link) into the DOM: 
 
    document.body.appendChild(newSquare); 
 
    
 

 
});

/* Only the one original div will be affected by this: */ 
 
#originalDiv { 
 
    height : 50px; 
 
    width : 50px; 
 
    background: red; 
 
    opacity : 0.3; 
 

 
} 
 

 
/* All generated divs will have the following class 
 
    so they will all look the same. But, none of the 
 
    original divs will have this class, so they won't 
 
    be affected.          */ 
 
.newDiv { 
 
    height : 75px; 
 
    width : 75px; 
 
    background: blue; 
 
    border:1px solid black; 
 
    font-weight:bold; 
 
    font-size:.1.5em; 
 
    color:yellow; 
 
    text-align:center; 
 
} 
 

 
/* This only affects links in new squares */ 
 
.newDiv > a{ 
 
    color:green; 
 

 
}

<input type="button" value="Create a square" id="btnMakeSquare"> 
 
<div id="originalDiv">I'm the original div</div>

Answer 2

Вы можете использовать <iframes>, чтобы загрузить другую веб-страницу на вашей странице. Вы можете использовать Javascript для добавления <iframes> страниц внутри друг друга, создавая желаемый эффект. W3Schools содержит статью о том, как использовать <iframes>.

Редактировать: Обратите внимание, что это определенно не лучший способ справиться с задачей. Тот же эффект может быть достигнут с помощью CSS и Javascript без необходимости загрузки на нескольких веб-страницах.