【问题标题】:Disqus in Cordova/Ionic app gets stuck on Disqus pageCordova/Ionic 应用程序中的 Disqus 卡在 Disqus 页面上
【发布时间】:2016-06-11 23:14:17
【问题描述】:

我正在尝试将 Disqus 添加到我的 Ionic/Cordova 应用程序中。我已经使用 iframe 成功让 Disqus 小部件出现在模板中,但是如果我单击 Disqus 小部件以登录到 Disqus 以添加评论,或者查看 Disqus 社区选项卡,例如,应用程序会转到非可滚动的 Disqus 页面填满整个屏幕,无法返回应用。

有没有办法让页面可以滚动并且比屏幕小,这样用户就可以重新进入应用程序。

静态服务器上的 Disqus 代码服务器是:

<!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">
	var params;
	var disqus_url;
	var disqus_title;
	var disqus_shortname;
	var disqus_identifier;
	
	window.onload = function () {
		var match,
			pattern = /\+/g,
			search = /([^&=]+)=?([^&]*)/g,
			decode = function (s) { return decodeURIComponent(s.replace(pattern, " ")); },
			query = window.location.search.substring(1);
		params = {};
		while (match = search.exec(query))
		   params[decode(match[1])] = decode(match[2]);
	    
		if (params["shortname"] === undefined || params["url"] === undefined || params["title"] === undefined) {
			alert("Required arguments missing");
		}
		else {
			loadComments(params["shortname"], params["url"], params["title"], params["identifier"]);
		}
	};
	
	function loadComments(shortname, url, title, identifier) {
		disqus_url = url;
		disqus_title = title;
		disqus_shortname = shortname;
		
		if (identifier !== undefined)
			disqus_identifier = identifier;
		else
			disqus_identifier = "";
	
		(function() {
			var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = false;
			dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
			(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
		})();
	}
</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>

在我的应用程序控制器中,我有:

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

模板文件的相关部分如下所示:

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

编辑 问题似乎是 Disqus 小部件中的 Web 链接是在应用程序中启动的。如果可以通过某种方式使链接在外部浏览器中打开,那么一切都可以正常工作,但我看不出如何让 HTML 代码以这种方式工作。

【问题讨论】:

    标签: javascript cordova ionic disqus


    【解决方案1】:

    这是我会尝试的:

    1) 尝试使用 !important 选择器覆盖 disqus 的 css

    2) 尝试使用 ajax 加载内容

    3) 搜索和阅读这样的文章:https://help.disqus.com/customer/portal/articles/472096-using-disqus-in-mobile-apps

    4) 为您网站上具有 disqus 的页面添加 iframe,并使 iframe 小于页面高度。

    【讨论】:

    • 感谢 Globlee。 (1)你指的是什么CSS?,(2)我正在使用Disqus推荐的方法我不知道Ajax方法你能详细说明吗?,(3)我读过那篇文章,它提到了我遇到的问题有但没有给出解决方案,(4)我尝试限制 iframe 高度(请参阅我的示例代码),但这似乎不起作用。
    • 这些只是一般性的建议,我没有深入研究过。在这种情况下,我会尝试 4. 在您​​的网站上有一个嵌入 disqus iframe 的页面,然后在该页面上使用 iframe,即 iframe 内的 iframe。因此,disqus 将是 iframe 内的整页。这有点令人困惑,但我认为它可以工作。
    • 我在页面中使用 iframe,但是当您单击其中一个 Disqus 链接(例如登录)时,它会将您带到另一个完整页面的页面,这就是问题所在没有办法回来。
    • @BillNoble 我也遇到了同样的情况。你找到解决办法了吗?
    • 不抱歉尚未找到解决方案
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-02
    • 2013-06-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多