Question

我遇到一个非常奇怪的问题！

我写了以下代码：

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

<textarea id="code">
    <div id="hello">Hello world!</div>
    <script type="text/javascript">
    $(function(){
        $("#hello").css({"border":"solid 3px red"});
        alert($("#hello").size());
    });
    </script>
</textarea>

<iframe src="iframe.html"></iframe>

<script type="text/javascript">
    $(function(){
        $("iframe").on("load",function(){
            $(this).contents().find("body").append($("#code").val());
        });
    });
</script>

“iframe.html”文件仅包含对jQuery库的调用。

结果就是“你好世界！”显示在iframe但没有红色边框！似乎$("#hello")不起作用。事实上，如果我alert($("#hello").size())，我会得到“0”。

你知道吗？谢谢！

编辑：添加“提醒”。

Answer 1

我认为html格式错了。你将div放在文本区域内和任何文本区域内，如果你放了一些html元素，那么这些只是作为一些文本，并且html元素不会在浏览器中呈现。所以你可以将div元素放在文本区域的一边。

<textarea id="code"></textarea>
<div id="hello">Hello world!</div>

我希望这会有效.. :)

Answer 2

。

$（本）.contents（）查找（ “正文”）附加（$（ “＃代码”）VAL（））; 只获得当前值，所以它可能不会复制链接到它的任何css值。 http://api.jquery.com/val/

我建议首先在1个文件中测试它以查看它的作用，所以现在删除iframe部分并检查1文件上的.size（）。这样你就知道了.val和.size（）在你的#hello上的行为。

尝试使用以下脚本：

<script type="text/javascript">
$(function(){
$("iframe").on("load",function(){
alert($("#code").val());
    var scriptx = $("#code").val();
    $(this).contents().find("body")[0].innerHTML = scriptx;
        });
    });
</script>
    });
</script>

将jQuery代码附加到iframe中不起作用

2 个答案: