JavaScript - problemas con iframe

   
Vista:

problemas con iframe

Publicado por Mario mariofvelasquez@gmail.com (1 intervención) el 04/12/2014 21:53:56
Hola amigos, estoy empezando con la programacion en java y he llegado hasta este punto en un programa; y quiero que haga lo siguiente:

Modificar el ejemplo de este tema para que se muestre el URL de cada iframe justo encima de la ventana donde se visualiza su contenido.

- Los URLs irán numerados de forma que cada uno lleve delante el string URL_n, siendo n el índice en el array.

- Añadir ademas un cajetín para introducir un número y un botón que borre el URL con el índice introducido cuando se pulse el botón.

Se recomienda utilizar el método splice(…) para eliminar dicho elemento del array y después volver a repintar la lista de iFrames restantes.

Este es el script y gracias de antemano.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
 
<style>
 
iframe {
  padding:30px;
  border:5px solid pink;
  background-color:white;
  width:300px;
  height:350px;
}
 
#iframes {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
 
    -webkit-flex-wrap: wrap;
    flex-wrap:wrap;
}
 
#marco {
    background-color: pink;
    padding: 10px;
    margin: 10px;
    border: 3px solid black;
}
</style>
 
<script type="text/javascript" src="../../../../../Downloads/55-for_iframe 3_files/zepto.js">
</script>
<script type="text/javascript">
$(function(){
  var urls = ["http://getbootstrap.com","http://vishub.org"];
 
  function mostrar(urls) {
    var i, iframes="";
    for (i=0;  i < urls.length;  ++i) {
      iframes += "<iframe src='" + urls[i] + "'></iframe>";
    }
    $('#iframes').html(iframes);
  };
 
  $("#boton").on('click', function(){
    urls.push($('#nuevo').val());
    mostrar(urls);
  });
 
  mostrar(urls);
});
</script>
</head>
 
<body>
<h3>Ejemplos de diseño responsivo</h3>
 
<input id="nuevo" value="Nuevo URL" type="text">
<button type="button" id="boton"> Añadir </button>
<p>
<p>
<p>
</p>
<div id="marco"><div id="iframes"><iframe src="../../../../../Downloads/55-for_iframe 3_files/a.htm"></iframe><iframe src="../../../../../Downloads/55-for_iframe 3_files/a_002.htm"></iframe></div>
 
 
 
</div>
 
</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder