How can I add and increment iframe in the document to also create new pages in the server with javascript as power point?

Question

1.00/5 (1 vote)

See more:

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.

What I have tried:

HTML

<!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 __wid="H874i7ay">Page2 </span>
			</a><div id="loadiframehere" ><a href="#Section1/" > 
		</a>
	</div></li>
</ol>
       <!-- <a href="#section_components" __wid="M9YjBwdy">^__i class="fas fa-cogs"__^</i__^<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="#">^__i class="fas fa-table"><span __wid="Xga5PenU">Tables </span></a>-->
        <a href="#" >^__i class="fas fa-th"><span >Forms</span></a>
        <a href="#" >^__i class="fas fa-info-circle"><span >About</span></a>
        <a  href="#">^__i class="fas fa-sliders-h"><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>

Andre Oosthuizen · Accepted Answer · 2020-07-13T21:29:00

Solution 1

Change your if statement when creating the frames to a while loop, change the page number with the correct number -

JavaScript

while (vbutt < 100)
     {
pagenum += vbutt;
var moniframe = document.createElement("IFRAME");
moniframe.setAttribute("src","http://localhost:7007/page" + pagenum + "/");
moniframe.setAttribute("width","150");
moniframe.setAttribute("height","150");
moniframe.setAttribute("height","150");
moniframe.setAttribute("background-color","snow");
vbutt++;
document.getElementById("loadiframehere").appendChild(moniframe);

}

EDIT: I have created a working fiddle for you HERE with a slight change in code to show how it works...

HTML

<button onclick="createpage();">
Create Page
</button>
<div id="loadiframehere">
IFrame going here...
</div>

JavaScript

function createpage() {
var vbutt = 1;
var pagenum = 1;

while (vbutt < 5)
     {
pagenum = vbutt;

var moniframe = document.createElement("IFRAME");
moniframe.setAttribute("src","http://localhost:7007/page" + pagenum + "/");
moniframe.setAttribute("width","150");
moniframe.setAttribute("height","150");
moniframe.setAttribute("height","150");
moniframe.setAttribute("background-color","red");
vbutt++;
document.getElementById("loadiframehere").appendChild(moniframe);
//alert(pagenum);
}

}

Posted 13-Jul-20 21:29pm

Andre Oosthuizen

Updated 14-Jul-20 1:05am

v2

Comments

Member 11837260 14-Jul-20 6:03am

Thank you for your answer. However when I executed the code the pages on the server are not incremented here is what I got: "http://localhost:7007/pageNaN/"

Andre Oosthuizen 14-Jul-20 7:06am

Please see updated answer and link to fiddle.

Member 11837260 14-Jul-20 8:05am

484/5000
Thank you very much. It works!

Please, I have another question for you. I had tried before putting an event click on the iframe but it does not work. because the iframe loses focus because of the page inside the iframe.

Is there a possibility when we click on one of the iframe, it is displayed in the right part in order to modify its content? The problem here is that all iframe have the same id so it will be difficult to modify a page.

Andre Oosthuizen 14-Jul-20 8:20am

Only a pleasure, please post another question with your request with details.

Member 11837260 14-Jul-20 8:30am

It is always the same subject and with the same code, except that I encounter another difficulty. Is it necessary to post another question?

Member 11837260 14-Jul-20 10:57am

Excuse me for having to go back to the same question there was a problem that I did not pay attention to in the while loop

when we add
while (vbutt <5) {
...
}
Each time I click on the button it creates 5 iframe at the same time with the same page number.

but when I modify by adding
while (vbutt <2) {
...
}
Each time I click on the button it creates 2 iframe at the same time with the same page number.

Please, is it possible to have the creation of 1 iframe each time I click on the button and which increments?

Andre Oosthuizen 14-Jul-20 8:57am

:) yes. You have asked how much is 1 + 1, answer was given that it is 2. You now want to ask how much is 3 + 1, entire new question.

Member 11837260 14-Jul-20 9:07am

Ok, in this case get ready because I have a lot of questions for you.

Andre Oosthuizen 14-Jul-20 11:13am

I would suggest that you learn the basics as I am giving you a solution but it does not seem that you understand the code itself.
1)Incorrect, each form has its own name i.e. page1, page2 etc as per the code that formed part of the while loop. Right click and inspect each element...
2) If you only want one element created, you remove the loop -

function createpage() {var pagenum = 1;//If you want to name the page with the new page numbervar lastChildID = document.getElementById("loadiframehere").lastChild.id;use the div's id to get all iframe elements...var moniframe = document.createElement("IFRAME");moniframe.setAttribute("src","http://localhost:7007/page" + lastChildID + "/");moniframe.setAttribute("width","150");moniframe.setAttribute("height","150");moniframe.setAttribute("height","150");moniframe.setAttribute("background-color","red");document.getElementById("loadiframehere").appendChild(moniframe);//alert(pagenum);}

The above code will work if you try and understand it first, don't just copy and paste. If it does not work 100%, play around with the code and get a solution.

Member 11837260 14-Jul-20 11:24am

Thank you !

Andre Oosthuizen 14-Jul-20 11:27am

Pleasure!

How can I add and increment iframe in the document to also create new pages in the server with javascript as power point?

1 solution

Solution 1

Add your solution here

Preview 0

How can I add and increment iframe in the document to also create new pages in the server with javascript as power point?

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us