Develop Reference

Correct way showing remote website content on own domain

I'm interested how websites like adf.ly showing remote website content with their own content on the bottom like "skip ad" in their case website he advertiser have placed for promotion ?
I need to show affiliate page but getting from Firefox/Chrome warning that I can't due security reasons.
Using code like this:
<iframe src="https://cnn.com" width="100%" height="500" frameborder="0">
However I see that using an JS code which is obfuscated on their website, they able to put it out. I'm a completely nooby with JS, is there an way to do it by not hacking browsers without hundreds bytes of code, do they deconstruct whole website somehow and then putting it over back for users using JS or other language ;-) ? Any directions would be nice, maybe there's an much easier way to do it over PHP maybe, I'm not asking for code ofcourse maybe someone know an library. Thank you very much.

since you tagged php in question, the easiest way would be
$copied = file_get_contents("https://link-to-site");
echo $copied;

I checked the https://cnn.com site and it uses a header called content-security-policy. In it they specify the option:
frame-ancestors 'self' https://*.cnn.com:* http://*.cnn.com:* https://*.cnn.io:* http://*.cnn.io:* *.turner.com:* courageousstudio.com;
This specifies valid parents that may embed a page using <frame>, <iframe>, <object>, <embed>, or <applet>.
Your browser clearly complies with this header.
There are ways to circumvent this, but this can get complex, and I am not sure I should help you with this.

How to prevent iframe from gaining focus in blogger?

There's a <iframe> element from external site, containing a textarea, in one of my blogger posts. I already added couple more posts after that. But when I open the site, the blog scrolls down to the <iframe> becuase it posseses the focus. How to prevent this so that when the blog is opened, the latest post can be seen?
This is how I added the iframe in the blog post.
<iframe border="no" allowtransparency="true" height="500" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" src="some external site reference" width="100%">
</iframe>
FYI, the blogger has dynamic views template.
I tried using scrollTo(), focus() to the latest post header. But it didn't work. I found that even if I print the count of article headers inside $(document).ready(), it returns 0. After the page fully loads, if I go to the console and re-print the length, only then it gives 10. Quite confused about how the blogger handles its posts.
<script>
$(document).ready(function(){
console.log( $('div.article-header').length ); // returns 0
});
</script>
Update
It looks like Blogger Dynamic Views loads the blog posts using AJAX. As a consequence, the document ready() gets called before the actual blog contents are fully loaded. 'Jeffery To' has given a good explanation about this below:
prettyPrint() doesn't get called on page load
Thanks.

$('body').scrollTo('#foobar');

Would a tabindex=1 in your blog title suffice?
Or add?
$(function() {
$("h1").first().focus()
});
H1 being your page title
[edit]
It's not blogger that is setting the focus on this textarea but it's the code within this iframe. It appears to be a big pain to prevent this behaviour due to cross domain scripting.
My advise? Alter your post by replacing the iframe with a simple hyperlink.

Stop an embedded iframe from redirecting

Is there a way to stop an embedded iframe from being clickable or make the entire iframe clickable? I want the iframe to pull the data, but I don't want visitors to be able to click the iframe and be redirected from only one spot on the iframe.
Is that possible? Here's an example of the iframe:
<iframe src="http://www.indiegogo.com/project/157203/widget?escape=false" width="224px" height="429px" frameborder="0" scrolling="no"></iframe>
http://jsfiddle.net/qX4fu/

As your iframe is obviously served by another domain, standard solutions cannot be used. You can't read or modify the iframe nor its document.
But you can put an invisible div over it like this : http://jsfiddle.net/dystroy/Afg3K/
<div id=a></div>
#a{
position:fixed;
top:0;
left:0;
width:224px;
height:429px;
}​
But most of the times, those things are forbidden by the iframe inclusion contract. Look at your agreement before you do it.

It is possible, though I would not recommend it.
Messing with default browser behavior such as anchor tag clicks will generally frustrate a user and prevent them from returning to your page.
Furthermore, as dystroy stated in his answer, the legal strings attached to dropping iframes on your page usually explicitly forbids this kind of behavior.
That being said, returning false from an event handler will prevent the browser from receiving the event:
document.getElementById('yourFrame').contentWindow.document.body.onclick = function () {
return false;
};
It is worth saying that this will not work if the iframe is in a different domain than where the script is running from. If that is the case, you will need to construct a transparent overlay div that swallows the click events and absolutely position it over the iframe.
Here is a fiddle demonstrating both approaches: http://jsfiddle.net/qX4fu/1/

If you are using HTML5 I would suggest making use of the new "sandbox" property BUT it is not yet compatible with all the browsers. http://www.w3schools.com/tags/att_iframe_sandbox.asp
In my case I just added "allow-forms" and "allow-scripts" as the sandbox property values and the embedded site no longer redirect and still can run JavaScript
ex: <iframe sandbox="allow-forms allow-scripts" ... /></iframe>
If anyone knows any Cons to using this approach I would love to know about it.
Someone else with same answer: https://stackoverflow.com/a/9880360/1404129 (I ran into this answer later)

Issue with Facebook Activity Feed plugin on my website

I have used face book recent activity script in my website,But it does not show anything in side the box where the script is placed,even I have feeds from my friend list.
Here is the code what I have used :
<iframe src="http://www.facebook.com/plugins/activity.php?site=http%3A%2F%2Fintegration.mytaste.com.au%2F&width=300&height=300&header=true&colorscheme=light&font&border_color&recommendations=false"
scrolling="no"
frameborder="0"
style="border:none; overflow:hidden; width:300px; height:300px;"
allowTransparency="true">
</iframe>
you can just test it from here itself
http://developers.facebook.com/docs/reference/plugins/activity/
use this url http://integration.mytaste.com.au/ for domain field in the box.

It doesn't look like you have any Open Graph tags on any of the pages on your site. Check out the Open Graph Protocol documentation and add at least the og:title, og:type, og:url, and og:image meta tags to your pages to have them start showing up in the Activity Feed plugin. You can use the URL Linter to ensure your pages are getting scraped correctly by us.
P.S. The auto-posting to a user's wall when they click your Like button is sort of misleading and could be called out as such by our Policy team (check out the policies). I would suggest you just use the Like Button instead. It has the added benefit of giving social context even if the user isn't logged in to your site. If you need to detect when a user has liked something on your site, you can subscribe to the "edge.create" event using FB.Event.subscribe in the Javascript SDK.

How to make javascript link target to my iframe?

I have a iframe and there is a javascript function in it. Basically, I want to create an anchor tag to call the function and activate it in my iframe. Do you have any idea?
<p>Edit Google</p>
<iframe name="test" src="http://www.google.com"></iframe>
It is not working. Any idea?

I was searching around trying to find an answer, but I think it's easier if I just give you a link to this site that I found: http://www.dyn-web.com/tutorials/iframes/refs.php

You can't do that for obvious security reasons: one website can't and should never be able to control anything in other website.
If both pages are in the same domain there is a way, but different domains? Nope.
Instead of showing iframe you can try loading the external site with AJAX, parse the result and show your own form.