javascript - 在字符串中显示下载的 html

Question

我正在尝试使用下载的 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) {
        }
    })

由于浏览器错误，我遇到了渲染问题:

Uncaught SecurityError: Blocked a frame with origin "http://localhost:xxxx" from accessing a frame with origin "null". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "data". Protocols must match.

我从事这个项目的方式是错误的吗？难道不能以这种方式使用 iframe 吗？ 根据记录，当 iframe 直接从本地 .html 文件呈现时，此 JQuery 单击功能是否有效。但当它附加了 html 时就不会了。

Answer 1

将 iFrame 想象为浏览器上另一个选项卡的窗口...在页面中打开页面。你正在做的就是尝试通过 json 传输数据，在客户端生成页面，然后将该页面放入 iframe 中......如果是这种情况，那么你可以一起消除 iramte 并使用 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.");
    }
});