在字符串中显示下载的 html答案

【问题标题】：Show downloaded html inside of string在字符串中显示下载的 html
【发布时间】：2015-03-04 16:11:44
【问题描述】：

我正在尝试使用下载的 html 字符串和 iframe 创建一种用户界面。我的 'Submitta' ActionResult 所做的是将 html 页面作为 JSON 字符串返回。然后我尝试将它附加到 iframe，以便记录和保存点击。见以下代码：

$.ajax({
        url: '/Home/Submitta/',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(paket),
        success: function (data) {
            var iframe = document.getElementById('frame');
            var html = data.Url;
            iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
            renderat = true;

            $('#frame').on('load', function () {
                console.log("load");
                var iframeDoc = document.getElementById('frame').contentWindow;

                $(iframeDoc).mouseover(function (event) {


                }).click(function (event) {
                    console.log($(event.target.valueOf()));
                });
            });

        },
        error: function (data) {
        }
    })

由于浏览器错误，我在渲染时遇到问题：

未捕获的安全错误：阻止了来源为“http://localhost:xxxx”的框架访问来源为“null”的框架。请求访问的帧具有“http”协议，被访问的帧具有“数据”协议。协议必须匹配。

我在这个项目上是不是走错路了？不能以这种方式使用 iframe 吗？作为记录，当 iframe 直接从本地 .html 文件呈现时，此 JQuery 单击功能是否有效。但不是当它附加了 html 时。

【问题讨论】：

您的“提交”返回的是 URL 还是 HTML 页面？
它返回一个html页面
iframe 的 src 应该是一个有效的 URL，例如 <iframe src="http://www.google.com"></iframe> 或某个相对 URL extraContent.do。只需像这样更改它iframe.src=html。您触发 Ajax 调用只是为了获取 URL，然后设置为 iframe src，这将触发另一个调用。难道你不能触发一个 Ajax 调用来直接获取第二个 URL，获取 HTML 并在 div 或其他东西中更新吗？
糟糕，我的错误 :) 我以为他在 JSON 响应中获取 URL。
@user3581054.. 你在 /Home/Submitta/ 中得到的 html 字符串是什么？您可以在您的问题中发布一些示例 html 吗？

标签： javascript jquery html asp.net-mvc iframe

【解决方案1】：

将 iFrame 想象成浏览器上另一个选项卡中的一个窗口...在一个页面中打开一个页面。您正在做的是尝试通过 json 传输数据，在客户端生成页面，然后将该页面放入 iframe 中......如果是这种情况，那么您可以一起消除 iframe使用 jQuery 将生成的 HTML 放入 div 或其他内容中。

$.ajax({
    url: '/Home/Submitta/',
    type: 'POST',
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    data: JSON.stringify(paket),
    success: function (data) {
        // take "data" and do what you gotta do to
        // get it into HTML...
        var resulthtml = "";

        // put that HTML generated above into 
        // your results div like this:
        $("#resultsdiv").html(resulthtml);

    },
    error: function (err) {
        $("#resultsdiv").html("Something went wrong.");
    }
});

【讨论】：