I opened this thread because I tried a lots of methodes I found here or elswhere to insert my custom stylesheet into an iframe with jQuery but none of them worked.
And now I’m stuck.
I’m open for any suggestion, for me it’s not necessary to do it with jQuery if there is any other souliton.
this is what I have now:
<!doctype html>
<html lang="hu">
<head>
<meta charset="utf-8">
<title><?php echo $this->title; ?></title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script src="js/mootools-more.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#iwiw').load(function(){
$('#iwiw').contents().find('head').append('<link href="css/iwiw.css" rel="stylesheet" type="text/css" />');
});
});
</script>
</head>
<body>
<header><!-- content --></header>
<div id="container">
<div id="left">
<iframe id="iwiw" src="http://iwiw.hu/like.jsp?u=<?php echo $url; ?>&title=<?php echo str_replace('+', '%20', urlencode($this->title)); ?>&t=tetszik&s=white" width="220px" height="120px" style="border: none;" scrolling="no" frameBorder="0"></iframe>
</div>
<div id="right"><!-- content --></div>
</div>
<footer><!-- content --></footer>
</body>
in the code $url is the current url encoded with urlencode and $this->title is the current page title and as you can see my document type is html5 and what you don’t see is that the iframe’s SRC is XHTML transitional.
Actually the iframe is the original working code if you would like to test it, just replace $url with your site’s url and the $this->title with your site’s title.
You cannot do that unless the current page is also from iwiw.hu. There is a cross-domain limitation, you cannot touch the output inside the
<iframe>you created if it’s outside your domain.