Iframe display incomplete page using jQuery-Ajax REST API call

Question

I use jQuery and ajax for REST API call and set the response to iframe. The target url returns html. It was successful but iframe shows plain page without any text formatting and other functionality. I have attached the images of actual and expected page result (part of page).

Do you how what is wrong with my code? I'm open for any suggestions or if you have better approach to get my expected result.

expected page image

actual page image

Below are my codes:

function loadPage()
{     
  $.ajax({
        url: 'URL',
        type: 'GET',
        headers: {
            'Authorization': 'Basic 123eewd45'
        },
        xhrFields: {
            withCredentials: false
        },
        dataType: 'html',
        success: function(data) {
            $('#myiframe').contents().find('html').html(data);
        }
    });
}

Iframe:

 <iframe onload="loadPage()"
        id="myiframe">
</iframe>

Thank you!

Because the url will return a html page with forms. Is there better way to show the page? — Mykhel, Feb 20 '19 at 12:44
You need to add a stylesheet to it. https://stackoverflow.com/a/217820/5545947 — Andrejs Gubars, Feb 20 '19 at 12:47
What is the content of your data variable? The whole page with css included? — Alex Mufatti, Feb 20 '19 at 12:49
The contents of data would be a server side generated html string. (i guess) — Andrejs Gubars, Feb 20 '19 at 12:55
@AndrejsGubars, yes. But if it is only the "body" part of the html page the problem is that the css is not loaded in the ifame. If the data variable include "header" part the problem can be a x-frame-option header — Alex Mufatti, Feb 20 '19 at 12:58
Well it seems that only divs and inputs are generated, not proper html document. — Andrejs Gubars, Feb 20 '19 at 12:59

score 0 · Answer 1 · answered Feb 20 '19 at 12:44

0

i think your css missing on that page please check that link u r style sheet (css) on that page

answered Feb 20 '19 at 12:44

kealaxshan

338
2
14

if you provide an answer, please provide an example. The explanation you gave is enough for the comment. – Andrejs Gubars Feb 20 '19 at 12:47
Do i need to copy the css of target url to my code? – Mykhel Feb 20 '19 at 12:49
using javascript you can add a stylesheet. – Andrejs Gubars Feb 20 '19 at 12:50
@AndrejsGubars, how come when i tried to call directly the other site from iframe without using javascript () the page shows fine. without changing my css. – Mykhel Feb 20 '19 at 12:53
if you check the src you will see the stylesheet attached. – Andrejs Gubars Feb 20 '19 at 12:54
this solution should give you indication on how to solve your problem. https://stackoverflow.com/a/10433550/5545947 – Andrejs Gubars Feb 20 '19 at 13:02

Iframe display incomplete page using jQuery-Ajax REST API call

Iframe:

1 Answers1