如何通过单击按钮在我的页面中包含 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 或任何东西怎么可能？

谢谢

Answer 1

与其引发另一个 HTTP 调用以及必须获取始终相同的文件内容的复杂性，不如仅在单击按钮时生成方块。

通过为所有新 div 赋予其自己的 CSS 类，您可以对它们进行相同的样式设置，同时保留所有原始 div。

为了清楚起见，在我的示例中，我向每个新方块添加相同的内容，但如果您要向点击事件处理程序添加条件逻辑，您可以根据自己的逻辑在不同的方块中创建不同的内容.

如果您想要添加的只是纯文本，则使用 textContent 属性将内容注入到正方形中，如果您想要注入需要解析的内容（即您的内容包含标记 - 用于例如，当我将文本“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 可以实现相同的效果，而无需加载多个网页。