Insert javascript into different page on same domain
Question
Hi I'm trying to insert some javascript into a page on my server, from a different page. The 1st page will be loaded into an iframe. I would like to insert some css styles to that page (in the iframe) from the page hosting the iFrame. is there a jQuery script I can use to do this?
Something like.
page1->page2 iframe. page2 script for styles-> page1 within the iframe
<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>
2 answers
solution1
1 2012-09-04 19:13:01
You can use jQuery's .contents() to access the iframe 's inner DOM. It's quite trivial from there:
$("#iframe_id").contents().find("head").append("<script>..scripts..</script>");
//or
$("#iframe_id").contents().find("head").append("<style>..styles..</style>");
Hope that helped!
solution2
0 2012-09-05 03:05:42
好了，这终于可以工作了：
$("#iframe_id").contents().find("head").html("<style>..styles..</style>");
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.