您好我正在尝试将一些javascript插入我的服务器上的页面,从另一个页面。第一页将加载到iframe中。我想从托管iFrame的页面向该页面(在iframe中)插入一些CSS样式。有没有我可以用来做这个的jQuery脚本?
类似的东西。
page1-> page2 iframe。 style->的page2脚本iframe中的page1
<body>
<!--<div id="left_col"></div>-->
<div id="middle_col">
<!--header-->
<div id="header">
<p>iFrame Example</p>
</div>
<div id="entry">
<p>Enter your URL</p>
<textarea id="mytextarea" rows="1" cols="50"></textarea>
<a title="Check Me Out!" id="btn-wrap">
<span class="title">Click to view site</span>
<div id="info">
<p>
<strong>Don't forget</strong>
<strong>the "http://"</strong>
</p>
</div>
</a>
</div>
<br/>
<br/>
<iframe id="myframe" src="http://johnverber.com/simple.html">
</iframe>
</div>
<!--<div id="right_col"></div>-->
<script>
$(document).ready(function() {
positionAd();
});
$(window).resize(function() {
positionAd();
});
var positionAd = function() {
var WINDOW_WIDTH = $(window).width();
var WINDOW_HEIGHT = $(window).height();
var BOX_WIDTH = $('#middle_col').width();
var BOX_HEIGHT = $('#middle_col').height();
$('#middle_col').css({"left": (WINDOW_WIDTH - BOX_WIDTH)/2, "top" : (WINDOW_HEIGHT - BOX_HEIGHT)/2});
}
$('#btn-wrap').click(function() {
var urlVal = $('#mytextarea').val();
if(urlVal.match("?_myTag")){
document.getElementById('myframe').src = urlVal;
}
else{
var addTag = urlVal.concat("?_myTag");
document.getElementById('myframe').src = addTag;
}
});
$('#myframe').contents().find("head").append("<link rel="stylesheet" type="text/css" href="addStyles.css" />");
</script>
</body>
答案 0 :(得分:1)
您可以使用jQuery的 .contents()
来访问iframe
的内部DOM。从那里开始就非常简单:
$("#iframe_id").contents().find("head").append("<script>..scripts..</script>");
//or
$("#iframe_id").contents().find("head").append("<style>..styles..</style>");
希望有所帮助!
答案 1 :(得分:0)
好吧,这就是最终结束的工作:
$("#iframe_id").contents().find("head").html("<style>..styles..</style>");