2016-01-14 1 views
2

J'essaie d'ajouter Disqus à mon application Ionic/Cordova. J'ai réussi à faire apparaître le widget Disqus dans un modèle en utilisant un iframe mais si je clique sur le widget Disqus pour me connecter à Disqus pour ajouter un commentaire, ou regarder l'onglet de communauté Disqus, par exemple, l'application va à un non scrollable Disqus page qui remplit tout l'écran et il n'y a aucun moyen de revenir à l'application.Disqus in Cordova/L'application Ionic est bloquée sur Disqus page

Y a-t-il un moyen de rendre la page défilante et plus petite que l'écran afin que l'utilisateur puisse revenir dans l'application.

Le serveur de code Disqus sur un serveur statique:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
 
</head> 
 
<body> 
 
<div id="disqus_thread"></div> 
 
<script type="text/javascript"> 
 
\t var params; 
 
\t var disqus_url; 
 
\t var disqus_title; 
 
\t var disqus_shortname; 
 
\t var disqus_identifier; 
 
\t 
 
\t window.onload = function() { 
 
\t \t var match, 
 
\t \t \t pattern = /\+/g, 
 
\t \t \t search = /([^&=]+)=?([^&]*)/g, 
 
\t \t \t decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); }, 
 
\t \t \t query = window.location.search.substring(1); 
 
\t \t params = {}; 
 
\t \t while (match = search.exec(query)) 
 
\t \t params[decode(match[1])] = decode(match[2]); 
 
\t  
 
\t \t if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) { 
 
\t \t \t alert("Required arguments missing"); 
 
\t \t } 
 
\t \t else { 
 
\t \t \t loadComments(params["shortname"], params["url"], params["title"], params["identifier"]); 
 
\t \t } 
 
\t }; 
 
\t 
 
\t function loadComments(shortname, url, title, identifier) { 
 
\t \t disqus_url = url; 
 
\t \t disqus_title = title; 
 
\t \t disqus_shortname = shortname; 
 
\t \t 
 
\t \t if (identifier !== undefined) 
 
\t \t \t disqus_identifier = identifier; 
 
\t \t else 
 
\t \t \t disqus_identifier = ""; 
 
\t 
 
\t \t (function() { 
 
\t \t \t var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false; 
 
\t \t \t dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js'; 
 
\t \t \t (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); 
 
\t \t })(); 
 
\t } 
 
</script> 
 
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> 
 
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a> 
 
</body> 
 
</html>

Dans le contrôleur de mon application j'ai:

var disqus_title = "TEST"; 
 
    var disqus_identifier = '/movie/' + 0; 
 
    var disqus_url = 'http://example.com/movie/' + 0; 
 
    var url = "http://example.com/disqus.html?"; 
 
    $scope.disqusurl = url + "shortname=example&url=" + encodeURIComponent(disqus_url) + 
 
    "&title=" + encodeURIComponent(disqus_title) + "&identifier=" + encodeURIComponent(disqus_identifier); 
 
    $scope.disqusurl = $sce.trustAsResourceUrl($scope.disqusurl);

La partie pertinente du fichier modèle ressemble à ceci:

<ion-content> 
 
    ... 
 
    <iframe style="max-height: 40%;" src="{{disqusurl}}"></iframe> 
 
    ... 
 
</ion-content>

EDIT Le problème semble être que les liens web dans le widget Disqus sont lancés dans l'application. Si d'une manière ou d'une autre les liens pouvaient être ouverts dans un navigateur externe, tout pourrait bien fonctionner, mais je ne vois pas comment faire fonctionner le code HTML de cette manière.

Répondre

0

Voici ce que je voudrais essayer:

1) essayer de plus de css tour Disqus à l'aide importante sélecteur

2) essayer de charger le contenu avec ajax

3) recherche et lire des articles comme ceci: https://help.disqus.com/customer/portal/articles/472096-using-disqus-in-mobile-apps

4) avoir un iframe à une page sur votre site Web qui a des disqus, et rendre l'iframe plus petit que la hauteur de la page.

+0

Merci Globlee. (1) De quel CSS parlez-vous? (2) J'utilise la méthode recommandée par Disqus Je ne suis pas au courant d'une méthode Ajax pouvez-vous élaborer? (3) J'ai lu cet article et il mentionne les problèmes que je suis avoir mais ne donne pas de solutions, (4) j'ai essayé de restreindre la hauteur iframe (voir mon exemple de code), mais cela ne semble pas fonctionner. –

+0

Ce ne sont que des suggestions générales que je n'ai pas approfondies. Dans ce cas, j'essaierais 4. Avoir une page sur votre site Web où le iframe disqus est incorporé et ensuite utiliser un iframe à cette page, à savoir iframe à l'intérieur d'un iframe. D'où le disqus sera full-page à l'intérieur de l'iframe. C'est un peu déroutant mais je pense que ça pourrait marcher. –

+0

J'utilise un iframe dans une page, mais lorsque vous cliquez sur l'un des liens Disqus (par exemple, vous vous connectez), cela vous amène à une autre page pleine page et c'est là que réside le problème. –