Bun*_*gle 45 javascript iframe jquery dynamic parent
我正在尝试使用JavaScript创建<iframe>,然后将<script>元素附加到<iframe>,我想在<iframe> d文档的上下文中运行.
不幸的是,我似乎做错了 - 我的JavaScript似乎成功执行,但<script>的上下文是父页面,而不是<iframe> d文档.当浏览器请求iframe_test.js时,我在Firebug的"Net"选项卡中也会收到301错误,但它会再次请求它(不知道为什么？)成功.
这是我正在使用的代码(现场演示http://onespot.wsj.com/static/iframe_test.html):
iframe_test.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title><iframe> test</title>
</head>
<body>
<div id="bucket"></div>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#bucket').append('<iframe id="test"></iframe>');
setTimeout(function() {
var iframe_body = $('#test').contents().find('body');
iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>');
}, 100);
});
</script>
</body>
</html>
iframe_test.js
$(function() {
var test = '<p>Shouldn\'t this be inside the <iframe>?</p>';
$('body').append(test);
});
一件似乎不寻常的事情是iframe_test.js中的代码甚至可以工作; 我没有在<iframe>本身中加载jQuery,只在父文档中加载.这似乎是我的线索,但我无法弄清楚这意味着什么.
任何想法,建议等将不胜感激!
Ole*_*hko 70
有同样的问题,花了我几个小时才找到解决方案.您只需使用iframe的文档创建脚本的对象.
var myIframe = document.getElementById("myIframeId");
var script = myIframe.contentWindow.document.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframe.contentWindow.document.body.appendChild(script);
奇迹般有效!
Bun*_*gle 16
我没有找到原始问题的答案,但我确实找到了另一种更好的方法(至少对我而言).
这不会在父页面上使用jQuery(这实际上是一件好事,因为我不想在那里加载它),但它确实以明显完全有效和可用的方式在<iframe>中加载jQuery.我正在做的就是用<iframe>的文档对象写一个从头创建的新文档对象.这允许我在一个字符串中简单地包含一个<script>元素,然后我将其写入<iframe>的文档对象.
代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>frame</title>
</head>
<body>
<div id="test"></div>
<script type="text/javascript">
// create a new <iframe> element
var iframe = document.createElement('iframe');
// append the new element to the <div id="bucket"></div>
var bucket = document.getElementById('test');
bucket.appendChild(iframe);
// create a string to use as a new document object
var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';
val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>';
// get a handle on the <iframe>d document (in a cross-browser way)
var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) {
doc = doc.document;
}
// open, write content to, and close the document
doc.open();
doc.write(val);
doc.close();
</script>
</body>
</html>
我希望这可以帮助有人在路上!