Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Exportar div a otro sitio web

HTML - Exportar div a otro sitio web

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 3
Ha aumentado su posición en 2 puestos en HTML (en relación al último mes)
Gráfica de HTML

Exportar div a otro sitio web

Publicado por Felipe (2 intervenciones) el 04/08/2017 18:45:58
Saludos!

Me explico:
Tengo un sitio web, donde muestro cierta información, lo que quiero saber es como exportar cierto contenido a otro sitio web.

Un ejemplo básico de mi idea es: Insertar un vídeo de YouTube en mi página web.

Es la misma idea pero con un div que contenga otra información para que así se pueda exportar y alguien mas lo utilice en sus sitios o páginas (algo así como los Widget).
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
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Exportar div a otro sitio web

Publicado por ScriptShow (409 intervenciones) el 06/08/2017 14:03:20
Saludos Felipe,

no soy partidario de librerías de terceros. No obstante, pueden ser útiles en estos casos... Un ejemplo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
<title>Demo</title>
<style>
html, body {font-family: sans-serif}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>Contenido:</b>
<p id="news"></p>
<script>
window.onload = function() {
$( "#news" ).load( "la-pagina.html #ID-del-Contenido" );
};
</script>
</body>
</html>

P.D.: Cambia el nombre de la página y la dirección / ruta completa (http://www..). Cambia el ID del contenido a mostrar. Es todo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de ScriptShow
Val: 359
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Exportar div a otro sitio web

Publicado por ScriptShow (409 intervenciones) el 06/08/2017 19:54:54
He verificado y ampliado el código para mejorar los resultados y la compatibilidad con todos los navegadores y dispositivos.

Los ejemplos son los siguientes:


Código para demo.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script>
window.onload = function(){ $('#data').load('data.html #content4') }
function test(i){ $('#data').load('data.html #content'+i) }
</script>
<input type="button" value="Dat 1" onclick="test('1')" />
<input type="button" value="Dat 2" onclick="test('2')" />
<input type="button" value="Dat 3" onclick="test('3')" />
<input type="button" value="Dat 4" onclick="test('4')" />
<div id="data"></div>
</body>
</html>


Código para data.html

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
<!DOCTYPE html>
<html>
<head>
<title>Data</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="content1">
<h1>One</h1>
<p>Content goes here ...</p>
<p align="right"><a href="#">Top ^</a></p>
</div>
<div id="content2">
<h1>Two</h1>
<p>Content goes here ...</p>
<p align="right"><a href="#">Top ^</a></p>
</div>
<div id="content3">
<h1>Three</h1>
<p>Content goes here ...</p>
<p align="right"><a href="#">Top ^</a></p>
</div>
<div id="content4">
<h1>Four</h1>
<p>Content goes here ...</p>
<p align="right"><a href="#">Top ^</a></p>
</div>
</body>
</html>


P.D.: Este tema me interesó y me interesa a día de hoy. Seguiré en ello...

Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar