Embed Page Without JS or CSS Conflicts - javascript

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.

Related

Showing a frame of another site on a page

I am trying to create a small frame on my site that will show the home page of another site similar to what google is doing with your most viewed pages. I know how to create this with frames but I am really against frames in general for many reasons not worth mentioning. Is there a jQuery plugin somewhere that can do that for me?
For a more visual explanation go here and navigate to 'portfolio'. The current developer is using simple images for what he is doing. I would like those icons to be frames of other sites instead
You want an actual image of a webpage? You'd need something like html2canvas, but that'll be html5 only. There's some methods for doing this in PHP as well, but it's tricky, and I've only heard of this in theory, never actually practiced it myself.
How about this link?
Website screenshots using PHP
To embed an external page within your page, you should check out the <iframe> tag.
As pointed out in the other answer absolutely the best solution to embedding an external site into yours is usually an <iframe>.
You could, in theory, avoid using <iframe>s by pulling in the HTML from the external sites via ajax requests and injecting it into your page, as appropriate, using javascript. This is a much more heavyweight solution however and I wouldn't recommend it to solve your particular problem, but just to point it out.
What I would recommend however is just linking to the sites, potentially with target="_blank" so that the links don't send the browser away from your portfolio.
<iframe>s have their place for certain solutions, but for browsing the different sites you've worked on? No - I'd say the user would benefit from the full browser window experience for that.

Dynamically add and remove iframe: Google red flag?

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.

Showing a demo of my CSS on any website

I have developed a small component which can be put in to any website. Now, I want to develop a code that could demonstrate how would my component look like on any website.
So, the person would come to my page and put in his URL and then my code should embed my custom JS/CSS in to the downloaded HTML and display it. Something like this.
Here, like the feedback tab, I want to show my component any where on that page.
Try a bookmarklet.
Create a piece of javascript that adds your code into the page such as the following:
javascript:(function(){var%20script=document.createElement('script');script.src='http://www.example.org/js/example.js';document.getElementsByTagName('head')[0].appendChild(script);})()
Add it as the href of a link like so:
Link Text Here
Tell your users to drag the link to their bookmark toolbar and click on it on different websites to try your code out.
Some examples: http://www.reclaimprivacy.org/, http://www.readability.com/bookmarklets
In the example you linked, they are requesting the page specified in the url querystring parameter on the server, and then doing more or less the following steps:
In the <head> tag they are adding a <base href="url" /> tag to the document. The base tag will make any relative links in the document treat the value in the href attribute as their root. This is how they are getting around broken css / images. (The base tag is supported by all browsers)
At the end of the document (IE the </body> tag) they are injecting the javascript that runs their demos.
They serve the modified HTML requested to the browser.
All of this is pretty straight forward in implementation. You could use regular expressions to match the <head> and </body> tags for steps 1 and 2 respectively. Depending on the server platform how you actually request the page will vary, but here are some links to get you started:
C# - HttpWebRequest object documentation
PHP - HttpRequest::send
Nathan's answer is the closest to how we have done the demo feature at WebEngage. To make such a demo functional, you'll need to create a Javascript widget that can be embedded on third party sites. syserr0r's answer on creating a bookmarklet is the simplest approach to do so. Our's is a JAVA backend and we use HttpClient to fetch the responses. As Nathan suggested, we parse the response, sanitize it and add our widget Javascript to the response. The widget JS code takes it on from there to render the Feedback tab and load a demo short survey.
Disclosure: I am a co-founder and ceo at WebEngage.
You can not do this with JQuery due to cross site scripting restrictions.
I suggest you write a PHP script that downloads the URL specified by the user and includes your widget code and then echo it back to the user.
I recommend using bookmarklets. I've made a bookmarklet generator for adding jQuery-enabled bookmarklets to a page to make development easier.
There's a caliper bookmarklet on the page that you can mess around with just to show an example of it working.
Full disclosure, this is something I've made, I'm not trying to be spammy as I think it's relevant: zbooks
You could make an iframe page, which loads their page in the iframe, and uses javascript to inject your code into the iframe.
Here is my approach...
http://jsfiddle.net/L2kEf/
html
<iframe src="http://www.bing.com"></iframe>
<div>I am div</div>
css
div { background: red; position: absolute; top: 20px; width: 100px; left:20px;}
iframe{width: 100%; height: 500px;}
you can add javascript/jquery too, so you could do something like,
jQuery //not 100% sure it would work coz of cross browser thingy, but you know, worth a try.
$('div').click(function (){
$('iframe').contents().html('changed');///
});
if this can't change any of the contents, you can display a dialog, to say it would normally work if it was in your website, then use #syserr0r approach for bookmarked users, for better results, since you are offering this kinda services, to developers, im sure they would know about bookmarking, my approach would be rarely used :) so hope it helps.
I had a problem of a similiar nature, and the main obstacle is the cross-domain policy.
You have to ask the user to put your code in a <script src="..."> or create a proxy solution that would add your code for them.
I went for the proxy and here are my observations:
it's easy to create a basic proxy in php - there are some php proxies on sourceforge and Ben Alman has created a simple php proxy for AJAX. Based on those I was able to create a php proxy altering the content properly in one day.
after that I spent a lot of time making it work with more and more sites with issues. You can never create a perfect proxy.
As an alternative (sa long as you are non-commercial) you can use http://www.jmarshall.com/tools/cgiproxy/ and put the site in an iframe and then do whatever you want to do with the iframes document, as it's in your domain thanks to the proxy. You can access iframeDOMnode.contentWindow.document then, etc.
You can create a Crossrider extension which your users can download.
Then simply add this to your App/Extension code:
appAPI.dom.addRemoteJS("http://yourdomain.com/file.js")
Your users can then download the extension (it works cross-browser for Internet Explorer, Chrome and Firefox) and it will load your JS code on every page load.
You can get an approximation of what it will look like using a iframe. Take a look at that link for an example.
http://jsfiddle.net/jzaun/5PjRy/
The issue with this appoch is that you can't move your DIV(s) when the page scrolls, they are in effect just floating over the iframe. There is no way around this as cross-domain scripting wont let you access the iframe's document to monitor scroll events.
The only other option you have for a better fitting example would be to load the page from the server side in whatever scripting language you are using and load that into the iframe (or into a div, etc.) and you can use javascript all you want as the page is coming from your domain.
For your example of what will your widget look like I imagine floating your DIV(s) over an iframe would give enough of an idea.
Please note the example you gave is using the server side method, not the iframe method.
I agree with the bookmarklet strategy.
I'm a fan of http://bookmarklets.heroku.com/, which lets you generate bookmarklets easily, inject jQuery, etc.

Refrashing the Javascript File without page refresh.

I am working on a very complex web site which is wizard based and have many JavaScript files included.
Now problem is if I pass through many step and at some later stage I find a JavaScript problem, as I fix it I have to load the page again and as I load the page again the Wizard will be started from step one again.
What I want is if I make JavaScript change in a file, there should be a possibility to refresh the JavaScript file through Firebug or something like it.
Thanks a lot.
No, not really. You could try to change the <script>'s src attribute to something like /your/script.js?timestamp=1234567890, but this doesn't give a reliable guarantee that the script will be loaded again.
You could add another script element into the DOM, but then you'd have two very similar scripts loaded at the same time, which may be problematic.

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