Как заставить реагирующую цель iframe уважать область просмотра iframe и вести себя так, как если бы к ней обращались напрямую?

Question

Следующий сайт полностью реагирует на прямой доступ:

https://prosolutionplus.com/

Однако при обращении через iframe его отзывчивость ведет себя неправильно и не соответствует ширина браузера:

iframe {
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     }

<div class="iframeContainer">
   <iframe src="https://prosolutionplus.com/">
   </iframe>
</div>

https://jsfiddle.net/g2eupd80/

Я испробовал каждое решение, реагирующее на iframe, которое смог найти (включая приведенное выше, которое на самом деле работает с другие адаптивные сайты), но ничего не работает на этом конкретном сайте. Я заметил, что при доступе через iframe целевой сайт устанавливает ширину 1093px , но он не делает это при прямом доступе и затем изменяет размер, поэтому, вероятно, поэтому разные решения, которые я пробовал, не работают. Другими словами, целевой сайт ведет себя по-разному в зависимости от того, к нему обращается браузер напрямую или через iframe.

Для этого целевой сайт, очевидно, является целевым сайтом. обнаружив что-то иначе при доступе через iframe, чем при непосредственном доступе, я просто не знаю, что это такое.

Как это исправить, чтобы iframe обрабатывался так же, как браузер, так что целевой сайт ведет себя отзывчиво в пределах iframe?

Сравните приведенный выше пример JSFiddle, который реагирует при прямом доступе, но НЕ при доступе через iframe, с примером ниже, который реагирует при доступе как напрямую, так и через фрейм. Единственное отличие в коде - это URL.

iframe {
         display: block;       /* iframes are inline by default */
         border: none;         /* Reset default border */
         height: 100vh;        /* Viewport-relative units */
         width: 100vw;         /* Viewport-relative units */
     }

<div class="iframeContainer">
   <iframe src="https://www.vigrxplus.com/">
   </iframe>
</div>

https://jsfiddle.net/phL2nt34/

Answer 1

Это CORS проблема на prosolutionplus.com . Если вы откроете сайт в его собственной маленькой вкладке и включите JavaScript Выкл. , вы заметите, что он устанавливает те же 1093px и ведет себя так же, как при фреймировании.

Если вы откроете консоль JavaScript во время фрейма prosolutionplus.com , вы увидите всплывающую ошибку CORS, в которой будет указано:

frontend.min. js? Ver = 2.4.5.1: 5 Uncaught DOMException: заблокирован фрейм с источником "https://www.prosolutionplus.com" от доступа к фрейму перекрестного происхождения.

Похоже, эта проблема вызвана Thrive Editor. Кроме того, вот краткое прочтение о перекрестном происхождении и причинах его блокировки: SecurityError: заблокирован фрейм с источником от доступа к фрейму перекрестного происхождения