How to include website code into iframe via javascript?

Question

I do a curl request with php and the response is a complete website including doctype, html section and so on.

Now I want insert this code into an iframe. In my opionion this only can be done with javascript. So I echo the javascript code from my php code.

Now I have the problem that the html code contains quotes and line breaks. The quotes are masked by addslashes php function. And I replace the linebreaks with preg_replace php function.

But I always get an error "unterminated string literal". You can see the error an this page using for e.g. firebug:

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

The iframe should be shown in the lowermost section called "Hotelbewertungen".

Thanks for any suggestion.

Why don't you just curl the code and echo it within the same PHP file? Then you can just include this PHP file in an iframe, without any JavaScript. — dsuckau
– dsuckau, Commented Apr 19, 2015 at 11:26
I believe the OP needs to display part of another website he doesn't control in his page, needs to prevent a scroll bar in the iframe, and doesn't want to muck about with processing the DOM to fit his site. Due to CORS, his options are limited. — Drakes
– Drakes, Commented Apr 19, 2015 at 15:53

Drakes · Accepted Answer · 2015-04-19 15:26:54Z

1

When trying to do something like this

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

we should not include <script>...</script> tags in your string literal. The HTML will catch the closing script tag and interpret it as valid markup. I've seen this problem before, and one solution was to "break up" the script tags string into something like "<"+"script>" and "<"+"/script>" inside the JavaScript.

However, a better solution is to use base64_encode() on the PHP side, then use window.atob() on the JavaScript side (it's supported by all major browsers). This will prevent markup from interfering with your JavaScript.

PHP file:

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

Rendered HTML:

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

edited Apr 19, 2015 at 15:26

answered Apr 19, 2015 at 12:17

Drakes

23.8k3 gold badges58 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

zuluk Over a year ago

This seems the best answer to my question. I will try tomorrow. Thanks!

zuluk Over a year ago

For german special chars I have to use: decodeURIComponent(escape(window.atob()))

Drakes Over a year ago

Ah, interesting. Well, I'm glad it is working for you!

tim-we · Accepted Answer · 2015-04-20 00:05:43Z

0

Why so complicated?

You have the url to the website you want to display in an iframe so just do it:

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

Or do you have a particular reason for trying to do it in this very complicated way?

Update: If you want to get rid of the scrollbars css is your friend: http://jsfiddle.net/fnnuv8n2/

edited Apr 20, 2015 at 0:05

answered Apr 19, 2015 at 11:32

tim-we

1,28910 silver badges16 bronze badges

3 Comments

zuluk Over a year ago

Sorry, I have forgot sth to say. I do not want to have a vertical scrollbar in the iframe. So the iframe height must be set by content height. However this is an external page, so the same origin policy blocks accessing the iframe with javascript. So your solution ist not possible for me.

tim-we Over a year ago

If you want to get rid of scrollbars, you don't have to use javascript to achieve that. I updated my answer and added a jsfiddle

zuluk Over a year ago

That is just the half truth. In your fiddle the content is not completly visible and thsi is not my aim. The iframe height should grow with it's content.

Collectives™ on Stack Overflow

How to include website code into iframe via javascript?

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related