1. casa
  2. Domanda e risposta
  3. Modifica del contenuto dei dati su un tag dell'oggetto in HTML

Modifica del contenuto dei dati su un tag dell'oggetto in HTML

2009-03-24 5 views
14

Ho una pagina HTML che contiene un tag Object per ospitare una pagina HTML incorporata.Modifica del contenuto dei dati su un tag dell'oggetto in HTML

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

Tuttavia, ho bisogno di essere per cambiare la pagina HTML all'interno del tag dell'oggetto. Il codice attuale sembra creare un clone dell'oggetto e sostituisce l'oggetto esistente con esso, in questo modo:

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); 
}

questo sembra un modo piuttosto povero di fare questo. Qualcuno conosce il modo "corretto" di cambiare la pagina incorporata?

Grazie!

MODIFICA: In risposta alle risposte di seguito, ecco l'intera fonte della pagina che sto utilizzando. L'uso di setAttribute non sembra modificare il contenuto del tag 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>

Le pagine Test1.html e Test2.html sono solo semplici pagine HTML che espongono il testo 'Test1' e 'Test2' rispettivamente.

fonte

2009-03-24 Tim C

risposta

2

Ecco come l'ho finalmente raggiunto. Si può fare

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

o forse

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

L'elemento oggetto ha anche una proprietà 'readyState', che può essere utilizzato per verificare se la pagina contenuta è 'carico' o 'completa'.

fonte

2009-03-31 15:28:46

+7

Questo non ha funzionato per me. Sia 'object.location' che' object.parentWindow' non sono definiti. –

8

È possibile farlo con setAttribute

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

EDIT: Si raccomanda inoltre di utilizzare il window.onload per garantire che il DOM è stato caricato, altrimenti non sarà in grado di accedere agli oggetti al suo interno .

potrebbe essere qualcosa di simile:

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

window.onload = changeData;

Si può leggere di più su window.onload here

fonte

2009-03-24 09:45:58 andi

+0

Non riesco a farlo funzionare al momento per qualche motivo. L'oggetto mostra ancora la vecchia pagina. Pubblicherò la pagina HTML completa che sto usando in seguito, se non avrò momenti di Eureka. –

+0

Ma il selettore funziona? Se si avvisa (document.getElementById ("contentarea")) cosa dice? Se dice Non definito, il DOM non viene caricato. Dovresti usare document.onload. Lo aggiungerò nella mia risposta perché i personaggi qui non sono abbastanza. – andi

+5

'setAttribute()' non funziona nemmeno per me. Il valore cambia in dom inspector, ma i contenuti renderizzati del tag '' non si aggiornano. –

0

Modifica l'attributo di dati dovrebbe essere facile. Tuttavia, potrebbe non funzionare perfettamente su tutti i browser.

Se il contenuto è sempre HTML, perché non utilizzare un iframe?

fonte

2009-03-24 10:07:14

+0

Il direttore del mio progetto mi ha detto che l'elemento iframe non è supportato nella DTD rigorosa HTML 4.1 e nella DTD XHTML 1.0 Strict e quindi non vuole usarli, il grande mediocre. –

+1

non si arriva mai da nessuna parte su un progetto, seguendo gli standard ... –

7

Questo sembra essere un bug del browser, setAttribute() dovrebbe funzionare. Ho trovato questa soluzione, che sembra funzionare in tutti i browser:

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

fonte

2012-05-18 00:08:03

0

antoher modo di farlo, si potrebbe incorporare l'oggetto in 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;

fonte

2013-03-02 11:23:00 MikeT

1

ho trovato una soluzione molto semplice che funziona anche in Chrome. Il trucco è rendere invisibile l'oggetto (o un elemento genitore), modificare l'attributo dei dati e quindi rendere l'oggetto nuovamente visibile.

Nel codice seguente, si presume che object_element sia l'elemento oggetto e parent_element sia il genitore e url sia l'url dei dati.

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

fonte

2013-09-21 14:47:21 user2802253

1

Seguendo user2802253, lo uso su Safari e Firefox, che impone anche un ridisegno. (mi dispiace, non abbastanza reputazione per postare come un semplice commento).

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

fonte

2015-02-13 19:04:06 wessel

1

Penso che questo sia un modo migliore per raggiungere il tuo obiettivo.

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');

fonte

2015-03-19 19:12:43

+0

Non funziona abbastanza! Scusa, ma ho impostato meno la risposta. –

0 

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

Rinfresca oggetto in Chrome versione 42.0.2311.90 m

fonte

2015-04-21 12:56:37

1

Le soluzioni di cui sopra non funzionavano correttamente in Firefox, il tag Object non si aggiornava per qualche motivo. I miei tag oggetto mostrano immagini SVG.

La mia soluzione di lavoro per questo è stato quello di sostituire il nodo di oggetto completo di un clone: ​​

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

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

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

fonte

2015-04-28 09:17:45

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

lavorato su Chrome versione 54 e Safari, ma non ha funzionato su IE 11

cosa ha funzionato su tutti loro

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

fonte

2016-12-13 05:22:56 user7288989

Problemi correlati

 Problemi correlati