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

Posted 2023-05-09

【中文标题】使用 jQuery-Ajax REST API 调用的 iframe 显示不完整的页面

【英文标题】：Iframe display incomplete page using jQuery-Ajax REST API call

【发布时间】：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，是的，样式不存在。

【参考方案1】：

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

【讨论】：

如果您提供答案，请提供示例。您给出的解释足以评论。

是否需要将目标url的css复制到我的代码中？

使用javascript可以添加样式表。

@AndrejsGubars，当我尝试从 iframe 直接调用其他站点而不使用 javascript () 时，页面显示正常。无需更改我的 CSS。

如果您检查 src，您将看到附加的样式表。