I'm currently integrating multiple microservices ui into a web portal. I have a navigation sidebar with link to microservices which will be loaded into an iframe in the central area.
I have lot of issue with iframe (security with frame option header, window sizing, etc...)
Do you know about a better alternative to an iframe?
If your micro services have a REST API available, you can use an embeded javascript code instead of iframe. Your embed code would look something like:
<div id="embed_id"></div>
<script type="text/javascript">
(function(){
var embededJavascriptElement = document.createElement("script");
embededJavascriptElement.type = "text/javascript";
embededJavascriptElement.charset= "utf-8";
embededJavascriptElement.id = "embed_script";
embededJavascriptElement.src = "<path to your script>";
(document.getElementsByTagName("head")[0] || document.getElementsByTagName("body") [0]).appendChild(embededJavascriptElement);
})();
</script>
The script above will insert another script tag into your DOM. That script will be interpreted, will search for the element with id ="embed_id" and will render the embeded code into that div (you need to implement this behavior).
You already tagged your question accordingly with spring-cloud and Zuul. I'd suggest this is exactly the way to go cause this way you can avoid the browsers sandbox as well as to manage CORS headers on your services. Just use start.spring.io and include Zuul as a requirement and define your rules. I suggest you start with static routes and if you then are familiar and confident with Zuul, embed a service registry and discovery like Eureka, consul or etcd.
Related
I am building a SaaS based web application, to which users can connect using their own domain and apply their company branding to it.
How can I customize the landing page of my application based on domain from which it is being accessed. There is no login information to identify the customer.
Thanks.
On your landing page, you can fetch request url and then customize the response accordingly.
You didn't mention the programming language, however in Java we can use ((HttpServletRequest)request).getRequestURL().toString() to get it.
Recently for one of my projects I used a third party service - www.grooveui.com, it does something similar but without you having to write server side code.
You can try to put in your iframe such code:
<script>
var wantedUrl = (window.location != window.parent.location)
? document.referrer
: document.location.href;
var wantedUrlEsc = escape(wantedUrl);
var newEl = document.createElement('script');
newEl.src = "https://your.server.com?wantedUrlEsc=" + wantedUrlEsc;
document.getElementsByTagName('head')[0].appendChild(newEl);
// or document.head.appendChild(newEl) in modern browsers
</script>
and on server side you can try read and decode the wantedUrlEsc parameter.
Good luck!
I want to apply css to google calender iframe. I had tried with Jquery but it gives JavaScript security error. However I also tried this link
Got success but many of its links goes to 404 page as it takes my domain as base URL
You will face a security error when you apply css using javascript to an iframe that contains a page in a different domain. but this problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe:
document.domain = "example.com";
the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element –
You cannot apply css to a iFrame ...
An iframe is a 'hole' in your page that displays another web page
inside of it. The contents of the iframe is not in any shape or form
part of your parent page.
From here
The reason behind that is security. If you have blabla.com in one
window and gmail.com in another one, then you’d not want a script from
blabla.com to access or modify your mail or run actions in context of
gmail on your behalf.
From here
If the iFrame is on the same domain and it doesnt violate the "Same-origin policy", you can work around this situation like this:
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
Solution posted here
Anyway, if you are not violating the "Same-orgin policy", you probably don't want to use an iFrame.
Looks like this doesn’t work anymore. Maybe Facebook stopped respecting the “css” attribute? Does this still work for anyone?
Facebook has deprecated the Fan Box (introduced in 2009) in favor of the new Like Box. While the features of each are similar, they use different JavaScript APIs.
You can still customize the appearance of the Fan Box with your own external CSS, but it's unclear how long Facebook will continue to support this ability.
Here's some sample FBML code that shows how the Fan Box accepts external CSS:
<div id="fb-root"></div>
<fb:fan
profile_id="104818966496"
backgroundshow_faces="true"
stream="false"
header="false"
connections="8"
css="http://example.com/css/stylesheet.css?1310162522">
</fb:fan>
<script>
// Initialize Facebook JavaScript SDK
// http://developers.facebook.com/docs/reference/javascript/FB.init
window.fbAsyncInit = function() {
FB.init({
appId: '136570223089806',
xfbml: true
});
};
// Asynchronously Load Facebook Fan Box Social Plugin
(function () {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
Some things to keep in mind:
Your custom CSS will be filtered through Facebook's content rendering servers and needs to be public facing. (Meaning, you'll have to upload/edit your CSS file to a web server to test how it looks when making changes).
It's recommended to append (and update) a query string to your CSS during development, since Facebook will heavily cache your CSS. After making a change, update your query string variable to instruct Facebook to fetch a new copy of your stylesheet.
Facebook will prefix all your HTML/CSS/JS elements with a "namespace" created using your application id. By doing this, Facebook ensures that your CSS can't manipulate standard Facebook elements and layouts.
Be aware, not all CSS properties and selectors are allowed, and Facebook will remove many CSS3 rules from your CSS.
Most frustrating of all though, is that Facebook seems to remove allow some vendor prefixes while disallowing others. For example, Facebook removes Webkit vendor prefixes (-webkit-border-radius) but allows Mozilla prefixes (-moz-border-radius). Annoying!
This means that rounded corners, drop-shadows and other vendor specific CSS may not appear in all browsers for your custom Facebook Fan Box. So, try as you might, you just may not be able to get your Facebook Fan Box to look the same in all browsers.
I developed one asp.net web site with functionality of finding route, find place
through bing map control.
My Problem is when I am opening this web site from windows mobile with internet explorer 6.
All controls are appearing but map control is not appearing why?
<script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2&mkt=en-us">
</script>
<script type="text/javascript">
function OnPageLoad()
{
var myMap = document.getElementById("myMap");
var LA = new VELatLong(41.2666452, -96.0011320,VELatLong.RelativeToGround);
myMap.style.display='';
map = new VEMap('myMap');
map.LoadMap(LA, 1, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1);
}
</script>
can any one help me?
Thanks
Knowing IE Mobile, I'd say it's something to do with your JavaScript probably.
How are you showing the map? Posting some code to your question would certainly help people narrow down the issue.
Looking at the directions service from bing.com on IE mobile, the map is a static image with the directions rendered on top - is this what you're doing? Or are you trying to call the default js map controls?
Edit to respond to update:
If you take a look at bing mobile you'll see that they aren't using the fully featured client side API, but are doing the bulk of the lifting on the server, culminating in a simple img tag being sent to the mobile browser to generate a static image request.
This sort of process is also talked about in this article on "Getting a map with the Virtual Earth Web Service", which concludes:
VEWS provides static images (on the fly), so you can insert them anywhere that support HTTP requests - mobile devices, JavaScript disabled browsers - or insert them into other documents such as PDFs.
I have a site which is using DNN (DotNetNuke) as a content management system. I am using another site for my event registrations. I have sent them my template; which displays the basics including a hover menu with many different items in it.
Issue is - as I update the menu on my site using DNN, I need it to be reflected on the site using my template - without me having to send them a new file. Anyone have suggetsions on how to approach this?
I don't want to send the events provider all of the DNN DLLs as well as my database login information in order to render the menu.
I created a page on my site that is something like 'menu.aspx' - this produces the menu in HTML format, however it has tags like in it that I'd like to remove before serving it to them.
What is the best approach for this? Do I need to write a custom server control using XMLHttp? Can I accomplish this in Javascript?
Any advice much appreciated.
Thank you!
If both sites are hosted on the same domain (eg site1.domain.com and site2.domain.com) you can use JavaScript and XmlHttpRequest to insert code from one site to another. Otherwise, the Same Origin Policy prevents you from using AJAX.
If they're not on the same domain but you have access to the page on their website, you can simply include there a JS script from your site :
<script type="text/javascript" src="http://yoursite.com/code.js"></script>
In the JS, simply document.write() what you want on the page. This way, you can easily change the content of the page on their site without having to send them a new file.
Finally, you can also use an iframe on their site, pointing to a page on yours.
EDIT: As Vincent E. pointed out, this will only work if they're on the same domain - my bad.
If you are unwilling or unable to use frames, then I would set up an ashx on your DNN server which renders the menu (if you've got it in a user control all the better, as you can just instatiate it and Render it directly to the output stream) and then just make an Ajax call to that from your events page and insert it directly into the DOM.
Here's a quick and hacky jquery-based example of the events page end of things:
<script type="text/javascript">
function RenderMenu(data)
{
$('#Menu').html(data);
}
$(document).ready(function() {
$.ajax({
type : 'GET',
url : 'http://localhost/AjaxHandlers/Menu.ashx',
data : '',
success : RenderMenu,
});
});
</script>
You'll want an empty div with the ID 'Menu' on the page where you want your menu to sit, but apart from that you're good to go.
If for whatever reason you can't get the menu HTML in an isolated way, then you'll need to do some text processing in RenderMenu, but it's still do-able.
I am not a web expert, so don't shoot me.
Can't you just put their registration form into an iFrame in DNN ?