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

Disqus in Cordova/Ionic app gets stuck on Disqus page

本文关键字：Disqus 卡在 Ionic 应用程序 Cordova      更新时间：2023-09-26

我正在尝试将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 代码以这种方式工作。

以下是我会尝试的：

1）尝试使用！重要选择器覆盖Disqus的CSS

2）尝试使用ajax加载内容

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

4）在你的网站上有一个有disqus的页面的iframe，并使iframe小于页面高度。

相关文章：