Как я могу добавить и увеличить iframe в документе, чтобы также создавать новые страницы на сервере с javascript в качестве power point?
Hello, Can someone please help me? I have a button that allows me to create the iframe element on each click. But i would like to create the iframe element and increment it with each click to create a new page that appears in the sidebar to have page 1, page 2, page n ... This will also increment the creation of each page of the server to have: "http:// localhost:7007/page1/" "Http:// localhost:7007/page2/" "Http:// localhost:7007/pagen/" Then, when I want to modify a page, I click on the page of the desired menu then it is displayed on the right to modify it without affecting the other pages. It's like the concept of PowerPoint. Thank you in advance for your advice.
Что я уже пробовал:
<!DOCTYPE HTML>
<html lang="fr"><head >
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content />
<meta name="author" content />
<title >Element_page</title><!-- Bootstrap core CSS -->
<link href="bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="style1.css" />
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" __wid="fBPsiBWb"/> -->
<style type="text/css" >
#myiframe {
margin-top: 120px;
margin-bottom: 30px;
width: 990px;
height: 580px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 4px 4px 14px #000;
-webkit-box-shadow: 4px 4px 14px #000;
box-shadow: 4px 4px 14px #000;
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=.2);
}
</style>
<script type="text/javascript" >
vbutt = 0
function myfunction(){
if (vbutt<100)
{
var moniframe = document.createElement("IFRAME");
moniframe.setAttribute("src","http://localhost:7007/page1/");
moniframe.setAttribute("width","150");
moniframe.setAttribute("height","150");
moniframe.setAttribute("height","150");
moniframe.setAttribute("background-color","snow");
vbutt = vbutt + 1;
document.getElementById("loadiframehere"+vbutt).appendChild(moniframe);
}
}
</script>
</head>
<body >
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark static-top" >
<div class="container" >
<a class="navbar-brand" href="#"> </a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation" >
<span class="navbar-toggler-icon"></span>
</button><button name="Add" onclick="myfunction()" > Add iFrame</button>
<div class="navbar-collapse collapse" id="navbarResponsive" style __wid="jJq33TtA">
<ul class="navbar-nav ml-auto" >
<li class="nav-item active" >
<a class="nav-link" href="#" >Home
<span class="sr-only" >(current)</span>
</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >About</a>
</li>
<li class="nav-item" _>
<a class="nav-link" href="#" >Services</a>
</li>
<li class="nav-item" >
<a class="nav-link" href="#" >Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!--sidebar start-->
<div class="sidebar">
<!--Section_dashboard-->
<ol >
<li >
<a href="#section-dasboard/"> <span > Page 1 </span> <iframe src="http://localhost:7007/page1/" name="docframe1" width="150" height="150" scrolling="no" style="background-color: snow;" class="embed-responsive-item" allowfullscreen></iframe> </a>
</li>
</ol>
<ol >
<li >
<a href="#Section1/" >
<span __wid="H874i7ay">Page2 </span>
</a><div id="loadiframehere" ><a href="#Section1/" >
</a>
</div></li>
</ol>
<!-- <a href="#section_components" __wid="M9YjBwdy"><span __wid="9WK9KiqR">Components </span> <iframe src="http://localhost:7007/testp2/" name="steph" __wid="aiSC7S2P" width="200px" height="150px" id="moniframe" scrolling="no" style="background-color: snow;"> </iframe></a> -->
<!-- <a __wid="icT4iM4a" href="#"><span __wid="Xga5PenU">Tables </span></a>-->
<a href="#" ><span >Forms</span></a>
<a href="#" ><span >About</span></a>
<a href="#"><span >Settings</span></a>
<!--sidebar end-->
<!--Content right-->
<center >
<div id="section_components" class="content">
<div class="embed-responsive embed-responsive-16by9" >
<iframe src="http://localhost:7007/page1/" name="docframe2" id="myiframe" class="embed-responsive-item" allowfullscreen contenteditable="true"> </iframe>
</div>
</div>
</center>
<!--Content right end-->
</div></body></html>