Dynamically add and remove iframe: Google red flag? - javascript

I've been looking into using an iframe to sandbox some javascript for a site module. I have one core question before I start to code and test this. Could adding and then removing an iframe from a webpage prompt Google to ban a website?
I'm not even sure if this is possible but here's what I'm hoping to do in a nutshell:
All of this is necessary to ensure comparability of my module with any website. I'll load a hidden iframe on the page. The frame will handle jquery operations & ajax calls for my module. Once the iframe has loaded I hope to store a reference in the parent window to a function in the iframe. I would then like to use javascript to remove the iframe from the page, while maintaining and utilizing the function reference. I'd appreciate insight into the feasibility of this, in addition to my core question.
Thanks,
skibulk

No, google won't take action against you for dynamically creating an iframe. It's done all the time. I'm not sure whether "iframe sandboxing" works on safari though.

Related

Embed Page Without JS or CSS Conflicts

I have question about posibility way to avoiding conflicts JS or CSS when I'm embed page from another site (Those both sites are on my own manage) without using iFrame or another framing solution.
i.e in my main page http://myfirstsite.com I want to show page from http://mysecondsite.com/page. I use same theme, javascript library, and css for both.
I already use $().load() and php file_get_contents() to show in my page (also using $.ajax). But it seems js library from http://mysecondpage.com/page doesn't work well.
Please see my captured image.
Note that why I'm using javascript load() because it will be a transaction request in the future.
Thanks for any advice and solution.
DK
Javascript on a primary page will not actually conflict with the javascript in an embedded element so that being said the javascript is not your issue.

How to make chrome extension to talk with angular on the page

I've a chrome extension which modifies the pages Dom. But the page is in angular so I need to change the scope of the element. How can I do that?
What you want is to interact with the page's JS context from the content script. There is nothing special about AngularJS in this regard.
In order to be able to interact with the page's JS you need to inject some code into the page.
This can be achieved in a lethora of ways and this answer covers them all in great detail.

method to include external url into existing page with overflow

Here is my situation. I have a new navigation menu built on an entirely different php framework than the actual site is running. Both the new navigation and the existing site are on the same domain. I tried removing the old bar and adding the new bar via an iframe:
<iframe src="/new/menu" width="100%" scrolling="no"></iframe>
This works perfectly fine except some of the menu elements have submenus. When the menu drops down, it's stuck inside the iframe and doesn't overflow the parent page.
I've looked into it and it makes sense this is a security issue with an iframe. But is there some other trick that would allow this external url to load AND overflow it's parent page?
Also, just so it's out there, this is a temporary visual upgrade the client is pushing me for. They want me to "splice" elements into place as they're completed so I definitely need to find some type of solution to make this work properly.
Any ideas will help!!
Some things you could do is First of all a php call something along the lines
$menu= file_get_contents('http://www.menuurl.com/');
echo $menu;
Second thing you could do is a javascript call preferable with jquery
$('#divToLoadInto').load('file.html');
Source:
http://api.jquery.com/load/
http://php.net/manual/en/function.file-get-contents.php
Here is some alternative solution:
- A Fully javascript solution using ajax

load external site and change its visualization

I'm trying to create a web page able to change a site visualization (.css or / and .js) in order to recreate the same live change capability offred by Firebug for Firefox or the Inspector of Chrome.
Here an image to better explain my task:
I have been able to visualize the other site inside my page using the iframe, but unfortunately it is not possible to change its visualization and access its elements due to the "same origin policy".
Is there a way to do this using the iframe or loading the external site inside another element?
Update:
Considering the answers the options should be:
create a php proxy page to load the target site and change visualization on it.
create a browser extention.
I've tried the first, even if it requires to install a web server (xampp), with a simple page calling the function file_get_contents('http://www.site.com');
The page is loaded but unfortunately missed some elements (like images) and it is only a static copy; it is not possible to go further in the site navigation.
Update 2:
Load the entire page via javascript could be the better solution (I don't konw how) if it is possible to live change the code but what about the possibility to interact with this "page copy" and transfer the interaction to the original one?
Scheme:
Explanation:
I've noticed Firebug extention can select and live edit any page element, even if they belong to the iframe which loads an external domain page.
What I'm looking for is a way to act like Firebug, get an element and change its style.
I'm trying to load the site into the iframe beacuse I wanted to create a toolbar above it to select my "visualization styles"; for example a button to makes titles bigger and red.
Anyway I'm open to any other methods suggestions.
Update 3:
I have found an extention for both FireFox and Chrome which is really close to my aim: "Stylish"
This add on allows to live change any site css proprerty and save it in order to reload them every time you'll visit the page.
Now my question is: How can I do the same creating a dedicated page to load and change visualization of a specific site?
FINAL EDIT:
In order to continue this question with a more relevant arguments I decided to ask a new one: create a php proxy page
No. Your solutions may be
to let your own site act as proxy so the same origin policy isn't triggered
to build an extension, which will be browser dependent (Firefox or Chrome) and which will require authorization and installation
I'm not sure if I understand what you want very well, but my feeling to ''trick'' this easier would probably to give very specific height and width to your first site (the iframe) and do a jQuery condition
If ($('body').width() == 500 && $('body').height() == 400 {
$('body').addClass('isiFrame');
}
Then, you only have to do your css .isiFrame .myCoolDivs {....}
You might have to use it on a document ready also, but that could be one way to trick it and since you're not doing it on resize (exepect if somebody's having his screen at this exact width and height at start)
The safer way would probably to create a master session using PHP but I cannot give you an example since it've been to long and echo the body class if the master_session or variable is equal to true
Hope it helped!
If you try to fight Same_origin_policy and try to fight it I am sure you won't get much success their.
Server Side
I would suggest you Handle this on server-side, grab the web-page and apply whatever styling and scripts you want, should be very easy!!
If you use Ruby on rails - Nokogiri gem can help you to parse html. And you can use standard library to 'get' a webpage.
Client Side
If you want to do this on client side, you need to write some jquery/javascript code, you can take following steps:
Get the webpage you want to display.
Grab the element's which include js/css files, remove them and your own.
Display the page in new Iframe present in your page.

Loading external content with jquery or iframe?

Hiho,
There's an existing website that i need to include into another site which goes like this:
a.mysite.com
and i need to fetch content from this site in my
www.mysite.com
website...
As i need to access the content of the iframe the Same origin policy produces a problem here.
What i did was to configure mod_proxy on Apache to proxy pass all requests from
www.mysite.com/a
to
a.mysite.com
This will work fine...but my problem is that im not sure what the best way would be to include those pages.
1. Idea
As the content of the iframe is a full featured site with a top navigation...left navigation etc....i would need to change the page template to only show the content box to be able to integrate that page in the iframe.
2. Idea
I could just load the DIV where the content lies through JQuery.load() and integrate it into my site.
What is the best way to accomplish such a task? How bad is both ideas from the SEO point of view?
Unless it involves significant rework, the best solution is to combine the two into a single HTML page on the server side (using server-side includes).
Advantages:
No problems with SEO as it's delivered as a single page. Content in iFrames and content loaded via AJAX (with an associated link in the HTML) are traversed, but only the link, not the content itself is associated with the main page. See: http://www.straightupsearch.com/search-marketing/best-practices/seo_iframes_a_g/
Faster page load - either of your suggestions will cause the main page to be loaded first before the other content is loaded.
No reliance on Javascript - your second method will fail completely if javascript is not supported / turned on.
Include all JS and CSS only once - your first method will require these to be duplicated in the <head> of each page. This is more of a long term advantage if you wish to achieve full integration of site "a". However, it can be a disadvantage initially, see below.
Disadvantage:
May cause conflicts with scripts and CSS between the two pages. However, this same problem exists with your second method.
If you must choose between either of the two options you proposed, I would not select the second as others have suggested. Significant amounts of static content should never be loaded via Ajax, and in this scenario gives you no additional benefits. At least iFrames guarantee no JS and CSS conflicts.
Use the 2nd approach (jQuery.load) and if you're working with HTML5, for browsers that support the History API you can change the URL to whatever the content is for that div.
Check out https://github.com/blog/760-the-tree-slider for an example of how github did it for their tree slider.
EDIT:
I am not sure how using an iFrame whose src points to your own domain affects search rankings but at best it's a grey area. I would assume that possibly some pagerank would trickle from the parent to the child but I have no clue how it would work for instance if a blogger linked to your page with the iframe that pointed to another page. This would be a pretty good question to ask at the Webmaster Help Forum
Always say no to iframes. jQuery+Ajax all the way.

Categories

Resources