无法成功嵌入/显示 POWR.io 评论

Question

对于任何遇到这个问题的人，希望这对你有帮助。

我创建了一个快速的小 test.html 文件并在 Chrome 中打开它。它包括以下片段，我无法显示任何内容。

<div class="powr-reviews" id="2753c372_1606181564"></div>
<script src="https://www.powr.io/powr.js?platform=html"></script>

它应该嵌入/显示此评论页面：

https://www.powr.io/reviews/i/26790199#page

任何和所有帮助将不胜感激。

Answer 1

非常难理解https://www.powr.io/powr.js?platform=html

也就是说，这是一种快速但非常原始的加载页面的方法，但源必须相同（在本例中：https://powr.io）

var theFrame=document.createElement('iframe')
theFrame.src="https://www.powr.io/reviews/i/26790199#page"
document.body.appendChild(theFrame)



//document.appendChild isn't reliable since it says some ONLY ALLOWS ONE APPENDAGE or something like that
//the above code only works if cors doesn't block you, meaning that your source for this would be from powr.io as well(THIS IS A SANDBOX SO IT GETS BLOCKED BECAUSE OF ORIGIN DIFFERENCE)

//if i run the code below, it works on newtab(if u pop up the console paste and enter)
document.write('<div class="powr-reviews" id="2753c372_1606181564"></div>')
var x=document.createElement('script')
x.src="https://www.powr.io/powr.js?platform=html"
document.body.appendChild(x)

现在我有一个小的 repl 来显示你的 2 行代码可以工作，但是如果你的源（在客户端运行它时的源）是文件，它就不起作用

现在，我在下面进行了一些尝试来模仿该代码到底做了什么

JavaScript 示例及其 repl

//iframe loader
function iframer(sourceUrl){
  document.body.innerHTML="" //makes sure ONLY this loads
  var iframe = document.createElement('iframe');
  iframe.src = sourceUrl;
  iframe.width=screen.availWidth;
  iframe.height=screen.availHeight;
  iframe.style="border: solid transparent";
  document.body.appendChild(iframe);
  return iframe;
}
var myFrame=iframer("https://www.powr.io/reviews/i/26790199#page")
console.log(myFrame)

HTML 示例及其 repl

<meta http-equiv="refresh" content="0;URL='https://www.powr.io/reviews/i/26790199#page'">

Answer 2

您试图将

div

添加到原始文件中，在这种情况下，您应该使用

iframe

。如果你还是想直接使用POWR而不需要编码，你可以在安装页面轻松找到iframe代码：

1. 前往发布页面。
2. 选择平台iFrame。
3. 复制生成的iframe代码。

这应该可以解决您的问题并按预期显示评论页面。

如果您使用的是 WIX、Shopify 等网站构建器，那么您拥有的 HTML 代码将非常适合。