Question

我正在尝试将Disqus添加到我的Ionic / Cordova应用程序中。我已成功使用iframe将Disqus小部件显示在模板中，但如果我点击Disqus小部件登录Disqus以添加评论，或者查看Disqus社区选项卡，那么应用程序将转到非可滚动的Disqus页面，它填满了所有屏幕，无法返回应用程序。

是否有办法让页面可滚动且小于屏幕，以便用户可以返回应用程序。

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

＆＃13;

<!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>

＆＃13;

在我的应用程序控制器中，我有：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

修改问题似乎是Disqus小部件中的Web链接在应用程序中启动。如果某些链接可以在外部浏览器中打开，那么一切都可以正常工作但我无法看到如何以这种方式使HTML代码工作。

Answer 1

以下是我要尝试的内容：

1）尝试使用！important selector

过度使用disqus的css

2）尝试使用ajax加载内容

3）搜索并阅读以下文章：https://help.disqus.com/customer/portal/articles/472096-using-disqus-in-mobile-apps

4）在您的网站上有一个iframe，其中包含disqus，并使iframe小于页面高度。

Cordova / Ionic应用程序中的Disqus崩溃在Disqus页面上

1 个答案: