使用 jQuery-Ajax REST API 调用的 iframe 显示不完整的页面答案

【问题标题】：Iframe display incomplete page using jQuery-Ajax REST API call使用 jQuery-Ajax REST API 调用的 iframe 显示不完整的页面
【发布时间】：2019-07-14 03:48:29
【问题描述】：

我使用 jQuery 和 ajax 进行 REST API 调用并将响应设置为 iframe。目标 url 返回 html。它是成功的，但 iframe 显示没有任何文本格式和其他功能的纯页面。我附上了实际和预期页面结果的图像（页面的一部分）。

请问我的代码有什么问题吗？我愿意接受任何建议，或者您是否有更好的方法来获得我的预期结果。

expected page image

actual page image

以下是我的代码：

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 onload="loadPage()"
        id="myiframe">
</iframe>

谢谢！

【问题讨论】：

你为什么又用 iframe 了？
你的页面是https还是http？
所以问题是看不到样式？
因为url会返回一个带有表单的html页面。有没有更好的方式来显示页面？
@AndrejsGubars，是的，样式不存在。

标签： javascript jquery html ajax iframe

【解决方案1】：

我认为您在该页面上缺少 css 请检查该页面上的链接您的样式表 (css)

【讨论】：

如果您提供答案，请提供示例。您给出的解释足以评论。
是否需要将目标url的css复制到我的代码中？
使用javascript可以添加样式表。
@AndrejsGubars，当我尝试从 iframe 直接调用其他站点而不使用 javascript () 时，页面显示正常。无需更改我的 CSS。
如果您检查 src，您将看到附加的样式表。