javascript - 在 iFrame 中运行自定义 JavaScript 代码的问题

标签 javascript jquery html iframe

所以我正在制作一个像 JSFiddle 这样的 JS Playground 。在添加 JavaScript 功能并调用不同的函数时,代码似乎是从页面文档根运行,而不是从 iframe 运行。

$(document).ready(function()
{
    var result = $("#result"); 

    htmlVal = htmlEditor.getValue();
    cssVal = cssEditor.getValue();
    jsVal = jsEditor.getValue();

    iframe = $("<iframe></iframe>");

    result.append(iframe);

    var iframeDoc = $(iframe.get(0).contentDocument) //iframe.contents();
    bodyFrame = iframeDoc.find("body");
    headFrame = iframeDoc.find("head");
    cssFiddle = headFrame.append("<style id='cssEdit'>"  + settings.JS + "\n" +  cssVal + "</style>").children("#cssEdit");
    jsFiddle = bodyFrame.append("<script id='jsEdit'>" + settings.JS + "\n" + jsVal + "</script>").children("#jsEdit");

    $("#update").click(updateResult);

    //setInterval(updateResult, 100);
});

function updateResult()
{
    htmlVal = htmlEditor.getValue();
    cssVal = cssEditor.getValue();
    jsVal = jsEditor.getValue();

    if(htmlVal.split("</body>").length == 2)
    {
        var bodyText = htmlVal.split("<body>")[1].split("</body>")[0];
        bodyFrame.html(bodyText);
        jsFiddle = bodyFrame.append("<script id='jsEdit'>" + settings.JS + "\n" + jsVal + "</script>").children("#jsEdit");
    }
    if(htmlVal.split("</head>").length == 2)
    {
        var headText = htmlVal.split("<head>")[1].split("</head>")[0];
        headFrame.html(headText);
        css = headFrame.append("<style id='cssEdit'>" + settings.JS + "\n" + cssVal + "</style>").children("#cssEdit");
    } else
    {
        bodyFrame.html(htmlVal);
        js = bodyFrame.append("<script id='jsEdit'>" + settings.JS + "\n" + jsVal + "</script>").children("#jsEdit");
    }

    jsFiddle.html(settings.JS + "\n" + jsVal);
    cssFiddle.html(settings.CSS + "\n" + cssVal);
}

Example

最佳答案

This answer really helped.

所以代码在全局命名空间中执行的原因是因为 jQuery。调用 bodyFrame.append('script'),运行 document.createElement('script'),这意味着代码将在 document 中运行,而不是在我的情况下在 iframeDoc 中运行。所以我们需要使用纯javascript。

    jsFiddle = doc.createElement("script");
    jsFiddle.setAttribute("type", "text/javascript");
    jsFiddle.textContent = "console.log(document.body)";

    bodyFrame[0].appendChild(jsFiddle);

关于javascript - 在 iFrame 中运行自定义 JavaScript 代码的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28644292/

相关文章:

html - div调整大小而不推送内容

html - li 大小与文本大小相同

JavaScript:在鼠标悬停时将所有包含 "*sometext*"的表 td 条目加粗

php - 你将如何在 php 5.4 中实现一个基本的文件上传进度条?

javascript - 是否可以通过输入组合框 jQuery 自动选择选项

jquery - 内容与移动 safari 中的绝对 Bootstrap 导航栏重叠

javascript - Ember js 事件类不适用于嵌套或子路由

javascript - Google+ Javascript 登录在 cb=gapi.loaded_0 :41 处未捕获类型错误

jquery - 如何获取表格图像以及如何检查图像是否可用或不使用jquery?

html - Div 高度不适用于动态内容 IE