将jQuery代码追加到iframe不起作用
将jQuery代码追加到iframe不起作用
提问于 2013-04-21 01:22:06
我遇到了一个非常奇怪的问题！
我写了以下代码：
<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库的调用。
结果是"Hello world!“显示在iframe中，但没有红色边框！看起来$("#hello")不能工作。事实上，如果我执行alert($("#hello").size())，我得到的是"0“。
你有什么想法吗？谢谢!
编辑:增加alert。
回答 2
Stack Overflow用户
发布于 2013-04-21 01:34:56
我想html格式是错的。你把div放在文本区域和任何文本区域内，如果你放了一些html元素，那么这些元素就会被简单地当作一些文本，并且html元素不会在浏览器中呈现。因此，您可以将div元素放在文本区域之外。
<textarea id="code"></textarea>
<div id="hello">Hello world!</div>我希望这能行得通。:)
Stack Overflow用户
发布于 2013-04-21 01:38:36
$(this).contents().find("body").append($("#code").val())；只获取当前值，所以它可能不会复制任何链接到它的CSS值。http://api.jquery.com/val/
我建议首先在一个文件中测试它，看看它做了什么，所以现在删除iframe部分，并检查一个文件上的.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16123116
复制相关文章
相似问题
腾讯云开发者
