Блог

Главная - Вопросы по программированию - Не удается успешно внедрить / отобразить POWR.io Отзывы

Не удается успешно внедрить / отобразить POWR.io Отзывы

#javascript

#javascript

Вопрос:

Всем, кто сталкивается с этим вопросом, надеюсь, это поможет вам.

Я создал быстрый небольшой 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

Любая помощь будет высоко оценена.

Ответ №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'">

Комментарии:

1. Это сработало, спасибо. Мне все еще любопытно, что именно такие платформы, как ShowIt, Big Cartel, Wix и т. Д., Делают по-другому, Чтобы они могли вставлять исходные пару строк кода, которые я предоставил.

2. @NoelG. покажите один из этих сайтов, пожалуйста .. я просто осмотрюсь и посмотрю точно.. но они либо сделали то, что я сделал, и использовали css, чтобы это выглядело потрясающе, либо сфотографировали это и включили картинку, ЛИБО на своем сервере они запросили страницу (серверную часть, а не клиентскую часть, потому что CORS сумасшедший и живет в браузерах клиентов), и они просто добавляют текст ответа всодержимое HTML, возвращаемое сервером

3. но, как я уже сказал .. на стороне клиента (в случае, если вы не контролируете серверную часть), это единственный способ .. css заставляет вещи выглядеть потрясающе

4. Как и в случае с ShowIt, их дизайнерский интерфейс позволяет вставлять пользовательский код, как видно на этом скриншоте . Я подключаю две строки из моего оригинального сообщения, и они могут отображать powr.io/reviews/i/26790199#page как видно здесь , даже несмотря на то, что в коде, который я вставил, нет прямой ссылки на него.

5. это работает, но только в certain определенных обстоятельствах.. например, применить его к консоли новой вкладки и запустить, он работает плавно, пытаясь полностью определить, где и где он НЕ БУДЕТ ЗАПУСКАТЬСЯ

Метки: