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。

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

如果要添加直接文本，则使用textContent属性将内容注入正方形，如果要注入需要解析的内容（即您的内容包含内容），请使用innerHTML属性标记 - 例如，当我向链接添加文本＆＃34; ESPN＆＃34;时，我还添加了HTML <br>元素。

＆＃13;

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);
  

});

＆＃13;

/* 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;

}

＆＃13;

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

＆＃13;

Answer 2

您可以使用<iframes>在您的网页上加载其他网页。您可以使用Javascript继续将<iframes>页面添加到彼此中，从而创建您想要的效果。 W3Schools 有一篇关于如何使用<iframes>的文章。

编辑：请注意，这绝对不是解决手头任务的最佳方式。使用CSS和Javascript可以实现相同的效果，而无需加载多个网页。

如何通过单击按钮在我的页面中包含html文件？

2 个答案: