I have a web page that I am hosting for a client. The page has the client's header and footer on it and our content (a flash app) placed in the middle.
The client now wants to provide us with an html page that contains their header, footer and some ads all in one document. They want us to include this document as an iframe and then dynamically place OUR content inside of that frame.
This seems very hacky to me but I thought I'd give it a shot. So what's the best way to take my markup and place it into the iframe?
Thanks!
Chris
Can't be done client side because of XSS security issues ... unless they are both on the same domain, but from your description, i doubt it.
Server side, you could dynamically read the target page, modify it any way you wish and then present it. If you really do need it in an iframe, you can dynamically load the modified source you got by something like this:
<html>
<head></head>
<body>
<iframe id="blah"></iframe>
<script>
var doc=document.getElementById("blah").contentDocument;
doc.open();
doc.write("content");
doc.close();
</script>
</body>
</html>
Just remember to also change any links, images, and so on with full URLs.
Can you supply them with some API they can use - so they can place something in their page to call your bits. As you are working with flash, you could avoid cross site scripting issues by including a policy file to give permission to their domain.
Related
When I load the page I get only a part of the code. The site is http://www.livescore.in
I want to create an html page that have a variable containing the full html code.
Thanks in advance
This might be what you're after. Using jQuery you can load a full page into your site. Create an empty div on your page and use:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#yourDivsID").load("yourURLHere");
});
</script>
You can't access the content of an external iframe (i.e an iframe which url belongs to a different domain).
So if your page is at example.com, and it contains an iframe loading livescore.in, the page will display the iframe and its content but the JavaScript code at example.com cannot read/write the content of the iframe.
There are solutions to this:
You can use postMessage to talk to the iframe but that means that the owner of livescore.in has agreed to communicate with you.
You make an ajax call to a server side script on your domain that will fetch the content for you and send it back to your JavaScript.
I have a website example.com and another website example1.com. i want to display example1.com as the iframe content in example.com site.
For example:
Include this in example.com <iframe src='http://example1.com'>
and add the jquery script in end of body in example.com. this is not working in cross domain. so any tweaks to this please
$(document).ready(function() {
$("#Frame").load(function(){
var timestamp = +(new Date());
$("#Frame").contents().find("head").append("<link href='http://xxxxxx.com/style.css?'+ timestamp +'' rel='stylesheet' type='text/css'/>");
});
});
so when the example1.com iframe loads in example.com the xxxxxx.com/style.css must be included in the header of example1.com iframe to change its css content
NOTE: I don't have control over example1.com which is the iframe content
The CMS i am using doesn't allow me access the server side. So manipulation can be done at the client side only. So solution like using proxy won't help.
I know about cross domian policy. but even some people do manipulate. thanks in advance
The only possibility would be to load the iframe content through a proxy of yours and modify the HTML content. You can not access iframes from another domain via JavaScript.
Reference
Reference2
Warning : This might not work as browsers implement and remove this feature more or less regularly.
One thing that you might do but which can break your website design (I would not recommend doing that unless you REALLY do not have any other choice) : use the seamless attribute on the iframe and enforce CSS styles with important on the elements you want modified.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/iframe
I believe that it is really not that well supported, and I provide this information as a thing to try if every other failed.
Ads requested via doubleclick often get served from an ad provider network that returns javascript that in turn performs document.write to place ads in the page. The use of document.write requires that the document be open, implying that the page hasn't reached document.complete. This gets in the way of deferring or lazy loading ad content. Putting such code at page bottom is helpful but doesn't do enough to lower all-important "page-loaded" time. Are "friendly iframes" the best we have? Is there any other alternative such as a clever way to override document.write that preserves the proper place in the dom?
Third party ads use document.write to add script and content into the "current" location in a page. The page owner doesn't have control over ad scripts and can't specify a display target div. The ad script expects to write and render at the document position where it is called, so it's not obvious how to position the ad correctly using deferred dynamic script loading. Lazy loading script into context is straightforward, but third-party content rendered in place via document.write is not so easily achieved.
postscribe.js by krux, as demonstrated at the HTML5 Dev Conference.
http://krux.github.com/postscribe/doc/postscribe.html
https://npmjs.org/package/postscribe
OK, so there are basically two primary ways in which an ad is rendered to the screen.
Using a Javascript include and some variables.
Using an iFrame that you place on the page.
And honestly, the Javascript normally just renders an iFrame. Ad Networks want the iFrame b/c it gives them the easy ability to drop cookies (has this user seen this ad elsewhere on the network) and it's easy to drop impression pixels (method of counting that page was rendered).
So here's your best bet.
Figure out the iFrame URL that is being rendered. Some networks will tell it to you directly if you ask nicely.
Place the iFrame on your canvas / html with the appropriate size (e.g. 728x90), but point it to a known URL on your domain that is blank. (or has a background color that matches your page).
Add the javascript that updates the SRC of the iFrame at the appropriate time.
iframe.src = 'myurl?'; iframe.reload();
That should be all that you need to do. Set it up so that everything else loads and then load the advertising iFrames last.
Note that this may affect your revenue from the ads. It depends on the user experience, but if the ads don't load until the user has scrolled them off the screen, then you won't get clicks or make money.
Also, keep an eye on ad network performance. I know that these guys have pretty good response times, but there are lots of ad networks and sometimes even the big guys have crappy response times.
I will give you another solution without using iframe. See http://github.com/shenjunru/LazyWrite
It will help you to defer the document.write()
I get used to render the ads at the bottom of the page in a hidden div and moving them with javascript.
something like this wherever you want to put your ads:
<div id="destid" style="width:350px; heigh: 200px"></div>
and at the end of the page:
<div style="display:none">
<script type="text/javascript">
document.write("<div id='srcid'>");
//your doubleclickcode
document.write("</div>");
</script>
<script type="text/javascript">
$("#srcid").appendTo("#destid");
</script>
</div>
The iframe method will work fine unless you are serving rich media ads. These are the type of ads that are generally flash based and, in some cases, expand out of their container. If you use iframes the rich media ads are restricted to the container (iframe).
The best way to accommodated all possible ads is to use the script method.
So there seems to be a standard forming around this called friendly iframes (FIF). It feels a bit like a hack but I feel better that the IAB is behind it.
Here's the documentation from the IAB: http://www.iab.net/media/file/rich_media_ajax_best_practices.pdf
It worked for me, and even though you are writing the js dynamically into an iframe, it still allowed the rich media ads to expand outside their space.
I solved the problem with an iframe. I replaced the script tag with an iframe that points to a simple page on my server that contains the script tag.
I replaced the tag
<script src="ad provider's url containing document.write()" type="text/javascript">
</script>
with
<iframe src="adpage.htm" style="border:none;width:...height:..."></iframe>
adpage.htm simply contains:
<html><head></head>
<body style="margin:0px;">
<script src="ad provider's url containing document.write()" type="text/javascript">
</script>
</body></html>
Did you mean Lazy load ads with Document.write
Then This is the best way
Add the Lazy loader to Head
Wrap the Ad with Document.write in LazyHTML Wrapper
<div class="lazyhtml" data-lazyhtml>
<script type="text/lazyhtml">
<!--
Your Adcode with Document.write (including wrapping <script>,<style> tags)
-->
</script>
</div>
More info: LazyHTML Github
I have a page that people load in an iframe (its like a widget they can put on their pages) and I want to see which pages are loading it... is this possible?
No, that's not reliably possible due to the Same origin policy.
(You would have to read the value of parent.location.href, which is not possible.)
I want to track what happens inside an iframe when a user clicks on links in the IFrame. The page that contains the iframe (the parent) is to track the user´s navigation through the page in the iframe. Both pages will be hosted on the same toplevel domain, although the subdomains will differ.
I need the parent page to be notified of every click, but I do not have direct control over the pages I load into the iframe.
Is adding an onclick to all the links whenever the page in the iframe is loaded possible? How would I go about doing this?
This would be the "template" on which to build:
<html>
<script language="javascript">
var currentURL;
</script>
<body>
<iframe id="container" width="500" height="500" src="http://subdomain.parentdomain.com"/>
</body>
Iframe CrossDomain access needs to be the same domain, subdomain, and port.
If you had them on the same domain, you could bind click event handlers on all the links, then when they are clicked log a click to something like google analytics, your database, etc.
I do not have direct control over the pages I load into the iframe
That's your blocker. If you can augment the code within the remote pages, you can use postMessage and the iframe fragment identifier hack to get browser coverage.
Fortunately, someone already did the dirty work for you:
http://easyxdm.net/
http://consumer.easyxdm.net/c/
http://www.codeproject.com/KB/scripting/easyXDM.aspx?msg=3153511
I am going to use an AJAX-Proxy to have the content (as far as the browser is concerned) come from my domain. This will solve all the cross domain scripting issues that CodeJoust mentioned. Speed of delivery might be a problem due to the overhead I will be generating, but that will have to be seen.
I will probably move along the lines of this Stackoverflow Question:
"Apply “onclick” to all elements in an iFrame"
Regarding legal issues pertaining to proxying and changing the content of pages dynamically, it will have to be checked. I believe that tracking users that give their express consent is, from an ethical standpoint, unproblematic.
With jQuery it would be easy.
$(document).ready(function(){
var iframeWindow = $('#container')[0].contentWindow;
$(iframeWindow).load(function(){
$(this).find('a').click(top.myClickHandler);
});
}
function myClickHandler(){
/* Do something */
}