如何通过 javascript 将网站代码包含到 iframe 中？答案

【问题标题】：How to include website code into iframe via javascript?如何通过 javascript 将网站代码包含到 iframe 中？
【发布时间】：2015-04-19 11:23:10
【问题描述】：

我用php做了一个curl请求，响应是一个完整的网站，包括doctype、html部分等等。

现在我想将此代码插入 iframe。在我看来，这只能用 javascript 来完成。所以我从我的 php 代码中回显了 javascript 代码。

现在我遇到的问题是 html 代码包含引号和换行符。引号被addlashes php 函数掩盖。我用 preg_replace php 函数替换了换行符。

但我总是收到错误“未终止的字符串文字”。您可以看到此页面使用的错误，例如萤火虫：

http://test.gute.reisen/hotel/details/reiseart/pauschalreise/datum_von/19.04.2015/datum_bis/20.05.2015/abflughafen/-1/abflughafen_code/-1/zielreg/Balearen/zielreg_code/567/anz_erw/2/anz_kind/0/hotelkat/0/reisedauer/-100/verpflart/Alle/zimmertyp/Alle/ref/h/page/1/maxpage/1/anzerg/10/hotelname/Galaxia/hotelcode/3274/sz/hb

iframe 应显示在名为“Hotelbewertungen”的最下方部分。

感谢您的任何建议。

【问题讨论】：

为什么不直接将代码卷曲并在同一个 PHP 文件中回显呢？然后你可以只在 iframe 中包含这个 PHP 文件，而不需要任何 JavaScript。
好主意！这很简单:-)
或者使用PHP file_get_contents。
我相信 OP 需要在他的页面中显示他无法控制的另一个网站的一部分，需要防止 iframe 中出现滚动条，并且不想处理 DOM适合他的网站。由于 CORS，他的选择有限。

标签： javascript php jquery html iframe

【解决方案1】：

当尝试做这样的事情时

...
document.write("<!DOCTYPE html lang=\"de\"> ... </script></body></html>");

我们不应在您的字符串文字中包含<script>...</script> 标签。 HTML 将捕获结束脚本标记并将其解释为有效标记。我以前见过这个问题，一种解决方案是将脚本标签字符串“分解”成 JavaScript 中的“”和“”之类的东西。

但是，更好的解决方案是在 PHP 端使用 base64_encode()，然后在 JavaScript 端使用 window.atob()（所有主流浏览器都使用 supported）。这将防止标记干扰您的 JavaScript。

PHP 文件：

....
document.write(window.atob("<?php echo base64_encode($cURLString);?>"));

呈现的 HTML：

....
document.write(window.atob("2lkZSB0aGUgSmF2YVNjcmlwdC4NCg0KSG93ZXZlc
   iwgYSBiZXR0ZXIgc3VnZ2VzdGlvbiBpcyB0byB1c2UgYmFzZTY0X2VuY2234nj234
   9kZSgpIG9uIHRoZSBQSFAgc2lkZSwgdGhlbiB1c2UgYXRvYigpIG9uIHRoZSBKYX3
   ZhU2NyaXB0IHNpZGUuIFRoaXMgd2lsbCBwcmV2ZW50IG1hcmt1cCBmcm9tIGludGV
   aW5nIHdpdGggeW91ciBKYXZhU2NyaXB0Lg=="));

【讨论】：

这似乎是我问题的最佳答案。我明天试试。谢谢！
对于我必须使用的德语特殊字符：decodeURIComponent(escape(window.atob()))
啊，有趣。好吧，我很高兴它对你有用！

【解决方案2】：

为什么这么复杂？

您拥有要在 iframe 中显示的网站的网址，所以只需执行以下操作：

<iframe src="<?php echo $url; ?>"></iframe>

或者你有什么特别的原因要尝试以这种非常复杂的方式来做这件事？

更新：如果你想摆脱滚动条 css 是你的朋友： http://jsfiddle.net/fnnuv8n2/

【讨论】：

对不起，我忘了说。我不想在 iframe 中有一个垂直滚动条。所以 iframe 高度必须由内容高度来设置。但是，这是一个外部页面，因此同源策略会阻止使用 javascript 访问 iframe。所以你的解决方案对我来说是不可能的。
如果你想摆脱滚动条，你不必使用 javascript 来实现。我更新了我的答案并添加了一个 jsfiddle
这只是半真半假。在您的小提琴中，内容并不完全可见，这不是我的目标。 iframe 的高度应该随着它的内容而增长。