1. Inicio
  2. Pregunta y respuesta
  3. Modificación del contenido de datos en una etiqueta de objeto en HTML

Modificación del contenido de datos en una etiqueta de objeto en HTML

2009-03-24 15 views
14

Tengo una página HTML que contiene una etiqueta Object para alojar una página HTML incrustada.Modificación del contenido de datos en una etiqueta de objeto en HTML

<object style="border: none;" standby="loading" id="contentarea" 
width="100%" height="53%" type="text/html" data="test1.html"></object>

Sin embargo, tengo que cambiar la página HTML dentro de la etiqueta del objeto. El código actual parece crear un clon del objeto y reemplaza el objeto existente con él, así:

function changeObjectUrl(newUrl) 
{ 
    var oContentArea = document.getElementById("contentarea"); 
    var oClone = oContentArea.cloneNode(true); 
    oClone.data = newUrl; 

    var oPlaceHolder = document.getElementById("contentholder"); 
    oPlaceHolder.removeChild(oContentArea); 
    oPlaceHolder.appendChild(oClone); 
}

Esto parece una forma bastante pobre de hacer esto. ¿Alguien sabe la forma "correcta" de cambiar la página incrustada?

Gracias!

EDIT: En respuesta a las respuestas a continuación, aquí está la fuente completa de la página que estoy utilizando. El uso de setAttribute no parece cambiar el contenido de la etiqueta Object.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>Test</title> 
<script language="JavaScript"> 
function doPage() 
{ 
    var objTag = document.getElementById("contentarea"); 
    if (objTag != null) 
    { 
     objTag.setAttribute('data', 'Test2.html'); 
     alert('Page should have been changed'); 
    } 
} 
</script> 
</head> 
<body> 
<form name="Form1" method="POST"> 
<p><input type="button" value="Click to change page" onclick="doPage();" /></p> 
<object style="visibility: visible; border: none;" standby="loading data" id="contentarea" title="loading" width="100%" height="53%" type="text/html" data="test1.html"></object> 
</form> 
</body> 
</html>

Las páginas Test1.html y Test2.html son páginas HTML simples que muestran el texto 'Test1' y 'Prueba2', respectivamente.

Fuente

2009-03-24 Tim C

Respuesta

2

Así es como finalmente lo logré. Usted puede hacer

document.getElementById("contentarea").object.location.href = url;

o tal vez

document.getElementById("contentarea").object.parentWindow.navigate(url);

El elemento de objetos también tiene una propiedad 'readyState' que se puede utilizar para comprobar si la página que contiene es 'carga' o 'completo'.

Fuente

2009-03-31 15:28:46

+7

Esto no funcionó para mí. Ambas 'object.location' y' object.parentWindow' no están definidas. –

8

Puede hacerlo con setAttribute

document.getElementById("contentarea").setAttribute('data', 'newPage.html');

EDIT: También se recomienda que utilice el window.onload para asegurar que el DOM se haya cargado, de lo contrario no será capaz de acceder a los objetos dentro de ella .

Podría ser algo como esto:

function changeData(newURL) { 
    if(!document.getElementById("contentarea")) 
     return false; 
    document.getElementById("contentarea").setAttribute('data', newURL); 
} 

window.onload = changeData;

Puede leer más sobre window.onload here

Fuente

2009-03-24 09:45:58 andi

+0

No puedo conseguir que esto funcione en este momento por algún motivo. El objeto aún muestra la página anterior. Publicaré la página HTML completa que usaré más adelante si no tengo ningún momento Eureka. –

+0

¿Pero está funcionando el selector? Si alerta (document.getElementById ("contentarea")) ¿qué dice? Si dice No definido, entonces el DOM no está cargado. Deberías usar document.onload. Lo agregaré en mi respuesta porque los personajes aquí no son suficientes. – andi

+5

'setAttribute()' tampoco funciona para mí. El valor cambia en el inspector dom, pero el contenido representado de la etiqueta '' no se actualiza. –

0

Cambiar el atributo de datos debe ser fácil. Sin embargo, puede no funcionar perfectamente en todos los navegadores.

Si el contenido es siempre HTML, ¿por qué no utilizar un iframe?

Fuente

2009-03-24 10:07:14

+0

Según mi líder de proyecto, el elemento iframe no es compatible con HTML 4.1 Strict DTD y en XHTML 1.0 Strict DTD, por lo que no quiere usarlos, el gran enemigo. –

+1

nunca llega a ningún lado en un proyecto, siguiendo los estándares ... –

7

Esto parece ser un error del navegador, setAttribute() debería funcionar. He encontrado esta solución, que parece funcionar en todos los navegadores:

var newUrl = 'http://example.com'; 
var objectEl = document.getElementById('contentarea'); 
objectEl.outerHTML = objectEl.outerHTML.replace(/data="(.+?)"/, 'data="' + newUrl + '"');

Fuente

2012-05-18 00:08:03

0

antoher forma de hacerlo, se podría insertar el objeto en un DIV

var newUrl = 'http://example.com'; 
var divEl = document.getElementById('divID'); 
var objEl = document.getElementById('objID'); 
objEl.data = newUrl; 
// Refresh the content 
divEl.innerHTML = divEl.innerHTML;

Fuente

2013-03-02 11:23:00 MikeT

1

he encontrado una solución muy sencilla que también trabaja en Chrome. El truco es hacer que el objeto (o un elemento principal) sea invisible, cambiar el atributo de datos y luego hacer que el objeto sea visible nuevamente.

En el código siguiente, se supone que object_element es el elemento object y parent_element es el principal, y url es la url de los datos.

parent_element.style.display = 'none'; // workaround for Chrome 
object_element.setAttribute('data', url); 
parent_element.style.display = '';

Fuente

2013-09-21 14:47:21 user2802253

1

Después de user2802253, utilizo este en Safari y Firefox, que también obliga a volver a dibujar. (Lo siento, no hay suficiente reputación para publicar como un simple comentario).

theObject.style.visibility = null; 
theObject.setAttribute("data", url); 
theObject.style.visibility = "visible";

Fuente

2015-02-13 19:04:06 wessel

1

Creo que esta es una mejor manera de lograr su objetivo.

HTML:

<div id="mytemplate"><div>

Js:

function changeTemplate(t){ 
var mytemplate = document.getElementById("mytemplate"); 
mytemplate.innerHTML = '<object type="text/html" data=' + t + '></object>'; 
} 
changeTemplate('template.html'); 
changeTemplate('whatever.html');

Fuente

2015-03-19 19:12:43

+0

¡No funciona lo suficiente! Lo siento, pero configuré menos esa respuesta. –

0 

var content_area = document.getElementById("contentarea"); 
 
    content_area.data = newUrl;

Refresca objeto en Chrome Versión 42.0.2311.90 m

Fuente

2015-04-21 12:56:37

1

Las soluciones anteriores no funcionaban correctamente en Firefox, la etiqueta Object no se actualiza por alguna razón. Mis etiquetas de objeto muestran imágenes SVG.

Mi solución para este trabajo fue reemplazar el nodo de objetos completa con un clon:

var object = document.getElementById(objectID); 
object.setAttribute('data', newData); 

var clone = object.cloneNode(true); 
var parent = object.parentNode; 

parent.removeChild(object); 
parent.appendChild(clone);

Fuente

2015-04-28 09:17:45

1 
var obj = document.getElementById("pdfDoc"); 
obj.setAttribute('data', newPdf);

trabajaron en la versión de Chrome 54 y Safari, pero no funcionó en IE 11

lo que funcionó en todos ellos

var obj = document.getElementById("pdfDoc"); 
obj.setAttribute('data', newPdf); 
var cl = obj.cloneNode(true); 
var parent = obj.parentNode; 
parent.removeChild(obj); 
parent.appendChild(cl);

Fuente

2016-12-13 05:22:56 user7288989

Cuestiones relacionadas

 Cuestiones relacionadas