Insert stylesheet into iframe

Question

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.

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

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.

edited May 23 '17 at 12:03

Community

1
1

answered Sep 15 '12 at 16:51

rationalboss

5,330
3
30
50

Infact you can use other domain if you control-own it, by posting messages between domains. – Aurimas Ličkus Sep 15 '12 at 16:55
Oh, thanks. I didn't consider cross-domain limitations. Than I think I will grab the share link from the iframe and simply create a button/link for this without iframe. Thanks again. – Laci K Sep 15 '12 at 17:09

score 0 · Answer 2 · edited May 23 '17 at 12:12

0

Some answers here ... unless the iframe domain defers from the main page.

How to apply CSS to iframe?

edited May 23 '17 at 12:12

Community

1
1

answered Sep 15 '12 at 16:57

Stphane

3,368
5
32
47

sadly I don't own the source and the domain differs so this wont work. But thanks. – Laci K Sep 15 '12 at 17:11

Insert stylesheet into iframe

2 Answers2