javascript - 在 modal/div 中显示 ajax 响应 - 当响应为网页形式时

标签 javascript jquery html css ajax

我正在执行一个 ajax 调用 - 一种 ping 操作来查看用户提供的 url 是否有效。它可以是 GET 或 POST 请求。我想向用户显示获取/发布请求的响应,所以我使用弹出模式来显示响应。但是,如果响应采用网页形式,则会干扰我原始页面的 css 样式(因为响应网页中的 css 样式)。 有什么办法可以将这个特定的 div 与我的网页分开,这样样式就不会受到干扰

以下是用于验证 char 变量中提供的 url 的代码片段(ValidateURL 是用于验证 url 并返回响应和响应代码的 rest API)

function validateURL(char){
    var value = char.value;
    $.ajax({
            url: "/FrugalPlatform/validateURL.action",
            type: "POST",
            data: {
                url: value,
                protocol : protocol,
            },
            success: function(data) {
                $("#response").html(data.response);
                $("#modalForResponse").modal();
            }
    });
}

返回的特定响应是一个网页

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<link rel="shortcut icon"
href="//dnassets-mauganscorp.netdna-ssl.com/images/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml"
title="Desktop Nexus" href="//www.desktopnexus.com/opensearch.xml">
...
...

其中包含链接的资源数量... 这搞乱了我的网页样式...

snapshot of one such scenario

最佳答案

我直接尝试将 html 响应放入 div 元素,这会扰乱样式。我现在使用 iframe,并动态修改其内容

var doc = document.getElementById('responseFrame').contentWindow.document;
doc.open();
doc.write(data.response);
doc.close();

其中 responseFrame 是 iframe 的 id

关于javascript - 在 modal/div 中显示 ajax 响应 - 当响应为网页形式时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44226768/

相关文章:

javascript - 在 for 循环内为 .setTimeout() 创建闭包

javascript - 无法在codeigniter中使用ajax更新数据库

javascript - 当我尝试在网站上构建键盘快捷键时,为什么 jQuery keyup 不起作用?

javascript - 图表.js : Label inside doughnut chart

html - 在 HTML/CSS 中实现跨浏览器圆 Angular 边框的最简单方法是什么?

javascript - AngularJs + ui.bootstrap.Modal 无法正常工作?

javascript - Nodejs异步任务和匿名函数

jquery - qtip2 在移动设备上禁用

html - CSS:居中图像。为什么不 'text-align: center' ?

html - 文本仅与 UL LI 中的 CSS 右对齐