We Keep Coding

Change styling / CSS in Cross domain iFrame (using "iFrame Resizer")

Hope not to get too much flak for my noob question! :-)
I would reeeeeally like an example of how to do the following:
I own two domains - domain A and domain B.
I'd like to display an iframe on domain B with a page from domain A ..but with different CSS (removing header, footer etc.)
At the moment I am using "Iframe Resizer" (https://github.com/davidjbradshaw/iframe-resizer) to automatically fit the iframe on domain B. This works great!
I just can't get a grip on either SENDING different styling from domain A or on MODIFYING the styling in the iFrame on domain B.
This is the code I currnetly have on domain A:
<!-- Scripts for resizing iFrame SEND -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/iframeResizer.contentWindow.min.js" defer></script>
<script>
//EITHER A TRIGGER OR A MESSAGE CONTAINING CSS TO SEND TO DOMAIN B...
</script>
<!-- Scripts for resizing iFrame SEND -->
..and this is the code I currently have on domain B:
<!-- Scripts for resizing iFrame RECIEVE -->
<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri();?>/js/iframeResizer.min.js"></script>
<iframe style="border: none;" id="asc" src="http://domainA.com/example" width="100%" scrolling="no"></iframe>
<script>
iFrameResize({log:false}, '#asc')
//A RECEIVER FOR THE TRIGGER / CSS FROM DOMAIN A RESULTING IN MODIFIED STYLING OF THE IFRAME CONTENT
</script>
<!-- Scripts for resizing iFrame RECIEVE -->
Thanks a zillion in advance to anyone who can help me out with this (most likely) simple piece of code! :-)

Create a stylesheet on domainB that has styles only for the iframe that you want to use and then append it to your iframe with jQuery.
Code:
$(document).ready(function(){
$('#iframeFromDomainA').load(function(){
$('#iframeFromDomainA')
.contents().find("head")
.append($('<link rel="stylesheet" type="text/css" href="https://www.domainb.com/css/styleforiframeonwebsiteb.css">')
);
});
});

load show_ads.js once

So we run google ads on our sites.
And I got thinking, each ad block ( of various sizes ) loads ..
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
eg:
<script type="text/javascript"><!--
google_ad_client = "ca-pub-xxxxxxxxxxxxxx";
/* ad served */
google_ad_slot = "xxxxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
and other ads, of different slot ( id's ) amd sizes, on the same page also load :
http://pagead2.googlesyndication.com/pagead/show_ads.js
each time. So a page with say three ads on, loads that exact same js file 3 times ..
Removing that script file, adding it ONCE to the head, doesnt work for us.. the ads just dont show.
So is there a method of loading that show_ads.js file just once / page load ?

The Google ads script utilizes document.write(), which means the script must be in the position in the HTML that you want the ad.
However, fear not: the show_ads.js file will only be downloaded by your browser once. The subsequent <script src="http://pagead2.googlesyndication.com/pagead/show_ads.js">s will load from cache.
In fact, the Cache-Control headers tell your browser it can load the file directly from cache for the next hour, so there should be only one trip to pagead2.googlesyndication.com per session, no matter how many pages are viewed.

Absolute url overwiritten as a Relative URl when adding a new html element like iframe etc (i.e adding the a base address at prefix of URL supplied)

I am trying to add an iframe to my website. The problem is that our CMS automatically overrides the src address given ex: I set the absolute url (source address) to http://www.youtube.com/embed/RE6C1AoWy3M and when the page is rendered the src is modified as shown.
The base address is being added. This was set as we normaly upload images/files on our file system.
Any idea how can I override this, maybe embed some javascript function. I do not have access to .cs/ Asp.net pages.

You can create an inline script that will render the iframe during the page load.
Example:
<html>
<head>
<title>example</title>
</head>
<body>
<!-- Your normal HTML/text here -->
<!-- add the script where you wanted the iframe to be -->
<script type='text/javascript'>
document.write("<iframe src='http://www.youtube.com/embed/RE6C1AoWy3M'></iframe>");
</script>
<!-- Your remaining HTML/text here -->
</body>
</html>

This has finally worked. I am creating the iFrame as shown below not using the CMS drag/drop html objects and modify the src attribute.
var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
// Here I am getting the object to append the iframe to
var elem = document.getElementById("td1");
// Append iframe to this element.
elem.appendChild(el);
el.setAttribute('src', 'http://www.youtube.com/embed/RE6C1AoWy3M');
</script>
Although this solved my problem, I am open to new maybe better suggestions. I am willing to learn from other's experience.

problem to display dynamically a javascript google ad in an iframe using jquery

We try to display the google ad in an iframe that we add dynamically. In an iframe, the field "src" is generally an url, but we want to use the data:text/html format to be able to use directly our ad code. It works for simple JavaScript code like a document.write('hello world')<\script>, but not with the google ad code.
We simulate this in an html file :
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function resizeFrame(f) {
f.style.height = 60 + "px";
}
$(document).ready(function() {;
var htmlCode = document.createElement("div");
var head = document.getElementById('google_ad_468x60');
var myFrame = document.createElement("iframe")
myFrame.name = "childframe"
myFrame.id = "childframe"
myFrame.src = "data:text/html, " + "<script>" + "<!--\ngoogle_ad_client = \"pub-0123456789abcdef\";\ngoogle_alternate_color = \"FFFFFF\";\ngoogle_ad_width = 468;\ngoogle_ad_height = 60;\ngoogle_ad_format = \"468x60_as\";\ngoogle_ad_channel =\"0123456789\";\ngoogle_color_border = \"FFFFC6\";\ngoogle_color_bg = \"FFFFFF\";\ngoogle_color_link = \"000000\";\ngoogle_color_url = \"666666\";\ngoogle_color_text = \"333333\";\n//-->"+"<\/script>"+ "<script src = \"http://pagead2.googlesyndication.com/pagead/show_ads.js\">"+"<\/script>"
myFrame.width = "468"
myFrame.scrolling = "no"
myFrame.setAttribute('marginheight', '0px')
myFrame.setAttribute('marginwidth' , '0px')
myFrame.setAttribute('frameborder' , '0' )
head.appendChild(myFrame)
});
</script>
</head>
<body onload="resizeFrame(document.getElementById('childframe'))" bgcolor="#FFFF00">
<div>
<h1>Before Google ad</h1>
</div>
<div id="google_ad_468x60">
<-- Here is display the the Google ad --!>
</div>
<div>
<h1>After Google ad</h1>
</div>
</body>
</html>
We do not have an error with Mozilla, but with Chrome we have this error, in both case the google ad is not displayed:
Unsafe JavaScript attempt to access frame with URL oursitewiththetestfile.com from frame with URL file:///home/lucas/Bureau/google_ad.html from frame with URL data:text/html, <script>google_comments</script> <script type="text/javascript" src="google_path.js"></script>. Domains, protocols and ports must match

In Chrome's intent to keep hackers and virus creators at bay, they do not allow access to an iframe using javascript when it is communicating with a different domain then the site it is hosted on.
You are going to be stuck in this method and I am unsure that there is a workaround. Either way, Google ads should be placed directly into the website as it uses the content to generate relevant advertisements to be displayed on the page. If you are looking for a way to display your own advertisements, it should either be done dynamically, written in the code language of choice, or using the ad creator on adsense.google.com to display your own ads instead of public service ads.
I personally feel that it would be much more simple that way.

Google does not want you to put ads in a frame and will ban you if they find out... Its in the terms of service section 5...

How do I Inject Javascript with Firefox Extension

I am building a Firefox extension and have come a long way. One of the parts of my extension is where I display a DIV at the bottom of the page and I want to put an ad into the div, but for some reason every time it does so, it redirects to another page entirely with the ad on it. So it looks like its not allowing me to insert this code below into the div that sits at the bottom. Any chance anyone can help?
This code of course calls the "ad_display.js" file and thats where it does the redirect. Any way I can do this or am I stuck in the water?
Thanks!!!
<!-- Beginning of Project Wonderful ad code: -->
<!-- Ad box ID: 38154 -->
<script type="text/javascript">
<!--
var pw_d=document;
pw_d.projectwonderful_adbox_id = "38154";
pw_d.projectwonderful_adbox_type = "2";
pw_d.projectwonderful_foreground_color = "";
pw_d.projectwonderful_background_color = "";
//-->
</script>
<script type="text/javascript" src="http://www.projectwonderful.com/ad_display.js"></script>
<!-- End of Project Wonderful ad code. -->

Two solutions:
Either you replicate the functionality of that ad_display script, change "document.write(pw_s)" to something a little saner like "document.getElementById('mydivwithanad').innerHTML=pw_s"
Ether you use insert an iframe in the page rather than a div, and you inject that code in the iframe.