Question

我有两个按钮设置为onclicks，使用JS连接到我网站内部的其他页面。这些页面只连接到运行表格中显示的php。然后，这个tanle数据显示在JS中设置的iframe中。我的问题是我无法使用CSS或通过我的html中的样式对齐iframe。我可以使用css来移动它，但我不能让它直接在按钮下面或在页面的中心排列。

<div class="center">

<button onclick="myFunction1()">Illustrators</button>

<button onclick="myFunction2()">Tech Writers</button>

</div>

<script>
var iframeExists = false;

 function myFunction1() {
 var x
 if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
 } else {
  x = document.getElementsByTagName("IFRAME")[0];
 }
 x.setAttribute ("src", "http://www.oldgamer60.com/Project/Illustrators.php");
 document.body.appendChild(x);
 }

function myFunction2() {
var x;
if (!iframeExists) {
  x = document.createElement("IFRAME");
  iframeExists = true;
} else {
  x = document.getElementsByTagName("IFRAME")[0];
}
x.setAttribute("src", "http://www.oldgamer60.com/Project/TechWriters.php");
document.body.appendChild(x);
}
</script>

CSS

iframe {
border: 0px solid #ffffff;
 margin: auto;
 width: 300px;
 Height: 200px;}

Answer 1

尝试这样做一些改变的 HTML

<button onclick="myFunction1()">Illustrators</button> <button onclick="myFunction2()">Tech Writers</button> <div id="myiframe-div"> </div> </div>

而不是

document.body.appendChild（X）;

使用

document.getElementById("myiframe-div").appendChild(x);

Answer 2

如果您希望iframe和按钮在中心对齐，那么请使用此HTML和CSS（以及您已经很好的JavaScript）：

<div class="center">
 <p>
  <button onclick="myFunction1()">Illustrators</button>
  <button onclick="myFunction2()">Tech Writers</button>
 </p>
</div>

iframe {display: block; /*new*/
        margin: auto;
        border: none; /*revised*/
        width: 300px;
        height: 200px;}
div.center p {text-align: center;} /*new*/

让iframe在网页上对齐

2 个答案: