2013-11-04 13 views
7

Sto provando a caricare un file JavaScript esterno dinamicamente in un elemento HTML per visualizzare in anteprima un tag annuncio. Lo script viene caricato ed eseguito ma lo script contiene "document.write" che ha un problema in esecuzione correttamente ma non ci sono errori.document.write Non funziona quando si carica la sorgente JavaScript esterna

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(function() { 
      source = 'http://ib.adnxs.com/ttj?id=555281'; 

      // DOM Insert Approach 
      // ----------------------------------- 
      var script = document.createElement('script'); 
       script.setAttribute('type', 'text/javascript'); 
       script.setAttribute('src', source); 

      document.body.appendChild(script); 
     }); 
     </script> 
    </head> 

<body> 
</body> 
</html> 

posso farlo funzionare se

  1. Se sposto la sorgente alla stesso dominio per il test
  2. Se lo script è stato modificato per utilizzare document.createElement e appendChild invece di document.write come il codice sopra.

Non ho la possibilità di modificare lo script da quando è stato generato e ospitato da una terza parte.

Qualcuno sa perché document.write non funziona correttamente? E c'è un modo per aggirare questo?

Grazie per l'aiuto!

+0

Perché non stai semplicemente inserendo il tag script all'interno dell'elemento in cui vuoi che venga visualizzato l'annuncio? Molto probabilmente, questo è il modo in cui è progettato lo script pubblicitario. – David

+0

Perché riceverò l'URL della fonte dello script tramite una chiamata Ajax. Questo non può essere reso da uno script backend – jadent

+0

quindi ... come ti aspetti che lo script pubblicitario sappia dove posizionare l'annuncio? – David

risposta

0

Fate non vogliono document.write su $(function() (quando dom è pronto)

Rimuovere il document .ready involucro.

E spostare il tuo - prima </body>. (. o alla posizione container - in cui si desidera inserire il widget)

così:

<html> 
    <head> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    </head> 

<body> 

//bla bla... 

<script type="text/javascript"> 

    (function(){ 

      var source = 'http://ib.adnxs.com/ttj?id=555281'; 

      // DOM Insert Approach 
      // ----------------------------------- 
      var script = document.createElement('script'); 
       script.setAttribute('type', 'text/javascript'); 
       script.setAttribute('src', source); 
       document.body.appendChild(script); 
    })(); 

</script> 
</body> 
</html> 

Importante:

enter image description here

+2

[Certo che puoi] (http://jsbin.com/OhUDIJE/1/edit). Ma non lo farei ... – David

+0

@David sì. cambiato la parola. :-) - Intendevo lo stesso. (se vuole che gli utenti vedano il suo sito - non può farlo/non dovrebbe farlo). –

+0

sì true, tuttavia, se lo script con 'document.write' è caricato async, probabilmente ripulirà anche il DOM poiché la richiesta richiede del tempo per essere eseguita. Guarda questa demo: http://jsbin.com/OhUDIJE/2/edit – David

1

Sarebbe potenzialmente pericoloso per caricare un tag script esterno in modo asincrono se contiene anche document.write. Quindi, vorrei suggerire sia utilizzando document.write a vostra fine così:

document.write('\x3Cscript src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>'); 

O solo un tag script (duh):

<script src="http://ib.adnxs.com/ttj?id=555281"></script> 
+0

IMHO non è necessario il '\ x3c' iniziale in' \ x3Cscript' solo per il tag di chiusura. –

+0

@RoyiNamir probabilmente vero, l'ho appena copiato/incollato da un vecchio snippet ... :) – David

+0

Non si può semplicemente usare un tag script poiché l'url viene caricato dinamicamente tramite una chiamata Ajax da un servizio web. Document.write in questo caso – jadent

6

Un'altra soluzione è quella di creare un iframe, quindi caricare lo script all'interno di quella iframe quando la chiamata AJAX è pronto:

var iframe = document.createElement('iframe'); 
document.body.appendChild(iframe); 
var doc = iframe.contentWindow.document; 

// do this whenever you want (f.ex after ajax is made): 
doc.open(); 
doc.write('<script src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>'); 
doc.close(); 

in questo modo, il document.write nello script finale non influenzerà il vostro sito, solo l'iframe. Dovrai modellare l'iframe per adattarlo all'annuncio.

+0

questa potrebbe essere l'unica risposta. dal momento che non conosciamo le dimensioni dovremo afferrare la larghezza e l'altezza del contenuto all'interno degli iframe dopo il caricamento. hacky ma probabilmente funzionerà. – jadent

0

Ho avuto lo stesso problema e ho trovato una soluzione. Il mio è un po 'più complesso, credo perché il mio layout è generato dal lato client, dopo dom-ready, il che significa che non posso renderizzare lo script in questo modo. Questo ha aggiunto un ulteriore passaggio per me, ma potrebbe non essere un passo in più per te se il tuo layout è generato sul lato server.

  1. Genera il tuo URL. nel vostro caso, la sua da una richiesta Ajax, nel mio caso, la sua da interazione con l'utente
  2. ricaricare la pagina con questo URL (forse pubblicare l'URL al server con una forma di nuova creazione)

Se si' Riuscire a rendere lo script include sul server, proprio dove dovrebbe essere, farlo e sarai fatto. Altrimenti:

  1. Creare un div sul lato server nascosto e con un ID particolare. Questo caricherà lo script pre-dom-ready e sparerà correttamente document.write.
  2. Raschia il contenuto del div che contiene lo script, ora hai l'html in una variabile e puoi metterlo ovunque sulla tua pagina!
Problemi correlati