2010-12-07 45 views
12

Très curieusement, il ne semble pas possible de définir des liens Document Google à ouvrir dans une nouvelle fenêtre. (target = "_ blank").Forcer les liens iFrame (dans Google Doc intégré) pour les ouvrir dans une nouvelle fenêtre

Lors de la publication d'un document Google et utiliser la fonctionnalité embed, un extrait de iframe est générée:

<iframe src="https://docs.google.com/document/pub?id=1mfSz_3cWh6eW-X3EhQTtCoZ33Km131An8Kyvmuxi5oM&amp;embedded=true"></iframe> 

Tous les liens du document seront ouverts dans le iFrame redirigés via le service de redirection de Google: http://www.google.com/url?q=

Y a-t-il un moyen de rendre ces liens ouverts dans une nouvelle fenêtre? Je sais qu'il peut y avoir des problèmes de script cross-frame donc c'est étrange Google n'a pas de moyen simple d'y parvenir ...

Répondre

3

OK, en l'absence d'une meilleure alternative, j'ai décidé de boucler l'URL de Google Doc et de faire de la magie jQuery avant le charger dans un iFrame.

Curl.php

curl_setopt($ch, CURLOPT_URL, $Url); 
[...] 
$("#header").hide() 
$("#footer").hide() 
$('a[href^="http://"]').attr("target", "_blank"); 

page.html

$("#google_content").html("<iframe width='100%' height='600' frameborder='0' src='http://www.example.com/Curl/Curl.php'></iframe>"); 

Google, est-ce vraiment la solution recommandée? ;)

+0

Je sais que ça fait longtemps, mais est-ce que c'était la seule façon de travailler? – Matt

+0

Malheureusement oui - mais aujourd'hui il y a, espérons-le, une meilleure solution! – dani

+0

Voici une solution JS côté client que j'ai trouvé: https://gist.github.com/psjinx/1f2317a50eb2b506ed84 – avioing

3

utilisateur avioing lié à GitHub essentiel: https://gist.github.com/psjinx/1f2317a50eb2b506ed84

C'est un bon point de départ.

Cependant - iframe srcdoc - est pas pris en charge dans IE - http://caniuse.com/#feat=iframe-srcdoc

Ma solution légèrement modifiée, les styles sont facultatifs.

<style> 
    body { margin: 0; padding: 0; } 
    iframe { margin-left: 2vw; margin-top: 2vh; height: 90vh; width: 90vw; } 
</style> 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

<iframe srcdoc="" frameborder="0" scrolling="no"></iframe> 

<script> 
    $(function() { 
     $.get("https://docs.google.com/document/d/1WUsQ_Kaa_tJljadPpHO2AFwvOAIqrYFS_zehUd6iCVk/pub?embedded=true", function(html) { 
      var contents = $("iframe").contents(); 

      contents.find("html").html(html); 

      setTimeout(function() { 
       contents.find('a[href^="http://"]').attr("target", "_blank"); 
       contents.find('a[href^="https://"]').attr("target", "_blank"); 
      }, 1000); // Actually not sure if timeout is required here... 
     }); 
    }); 
</script> 
+0

Merci pour le partage! Des inconvénients pertinents de faire cela? –

+1

@FabricioPH Inconvénients pertinents - SEO - ne sais pas si Google indexe correctement cette page. Exemple de mine - http://genesis.re/cruitment/ - vous pouvez voir la source .. –