I'm hosting an iFrame and it seems like when a link points to external domains it loads it on the main window and not in the iFrame.
Is there a way to force the links to be opened in the same iFrame?
Notice: I can add anything I want to the page loaded in the iFrame (using Chrome extension).
I tried adding:
<base target="_parent" />
But it didn't do any good...
Check Headers of your external domain page. If X-Frame-Options Header is set to DENY, browser ignores loading content to iframe or frame set and loads in main frame of browser.
Regardless of the site attempts the page cannot be displayed in a frame.
Your Code
<base target="_parent" /> is used for Loading the result into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self, so it can not solve your problem
Use
<base target="myframe"> instead where myframe is name of your iframe.
<iframe width="200" height="200" name="myframe"></iframe>
Demonstration
Look for server headers for loading pages
<html>
<head>
<base target="myframe">
</head>
<body>
Base
A Tag
<iframe width="200" height="200" name="myframe"></iframe>
</body>
</html>
References
X-Frame-Options Header
Related
I am loading a footer page (.aspx) through iframe to main page. and the css not able to apply from .css file to the footer page. only inline styles of the page code inside iframe is only visible. Is there any way to apply external css to the iframe content/page?
<link rel="stylesheet" type="text/css" href="/SitePages/Styleforallpagedesign.css">
<iframe src="SitePages/Footer_1.aspx" onload="this.before((this.contentDocument.body||this.contentDocument).children[0]);this.remove()"></iframe>
I have a web page that is was optimized mostly for IE and Chrome. I am trying to figure out tips on how I should display this image since it looks quite awful just sitting above the copyright on all my webpages. I am looking for any CSS tips on how I can make the highlighted portion of this web page have a more professional look to it. All suggestion are greatly appreciated!
<p class="clearfix">
This page is optimized for Internet Explorer and Chrome. To ensure accurate processing of your mail packet, please ensure JavaScript is enabled in your browser.
</p>
What I suggest doing is center the copyright info. Then create two separate CSS files. One that will be used if the user doesn't have javascript enabled and the other if they do. The text you have ("This page is optimized for..") should be in the CSS file where javascript is disabled(Also move that text to the top of the page and center it).
How do you check to see if they have javascript enabled? do this
<link rel="stylesheet" href="jsdisabled.css" />
<script type="text/javascript">
document.write('<link rel="stylesheet" href="jsenabled.css" />');
</script>
"although the solution below works it does not validate
inside your noscript tag you can put some style tag that hides the rest of your content. "
*no script option *
<noscript>
<style type="text/css">
#content { display:none; }
</style>
no js content goes here.
</noscript>
How can I show different content when JavaScript is disabled?
This way that text won't appear for everyone, just the people who don't have javascript enabled.
I have a third party application that can host HTML in something it calls a container. In the container, we do the following:
<meta content="IE=EmulateIE9" http-equiv="X-UA-Compatible" />
<iframe style="WIDTH: 100%; HEIGHT: 640px" id="c_list"
src="/Path/ToMVC/ControllerPage" width="100%"></iframe>
In the _layout.cshtml that is used by ControllerPage, we hardcoded the links to the CSS in the head element. If I right click and pick "View Source", I can see the paths. Ex:
<link href="/Project/Content/Sheet.css" rel="stylesheet"/>
Despite all of the above, the CSS in Sheet.css is ignored/dropped/not used. When I view the "/Path/ToMVC/ControllerPage" URL in its own window, all the CSS renders without issue. How can I force the IFrame to stop dropping the CSS?
EDIT: Ok, I made a discovery. Using the F12 dev tools, I noticed the page using the IFrame was running in IE quirks mode instead of IE standards mode (Which is what the page is using when viewed outside of an IFrame). When I changed it to IE 9 Standards mode, all the CSS worked! Is there a way I can force the IFrame page to go with IE9 Standards instead of Quirks mode?
I have two iframe's below. One works in safari and one does not. I cannot seem to figure out why this is happening.
If the iframe will cause problems with soultion, can you recommend a solution for embedding a web page within a web page?
Thanks!!!
This works on Safari:
<html>
<head>
<title>iframe Test</title>
</head>
<body>
<iframe src="http://ebay.com" width="100%" height="400"></iframe>
</body>
</html>
This does not work on Safari
<html>
<head>
<title>iframe Test</title>
</head>
<body>
<iframe src="http://public.bullhornstaffing.com/JobBoard/Standard/default.cfm?privateLabelID=7327" width="100%" height="400"></iframe>
</body>
</html>
The URL you listed requires four cookies to be installed before loading the page. Safari doesn't load the cookies when accessed via an iframe. If you open the url directly in another tab - it loads fine and then refreshing the iframe tab loads the iframe without error. Delete the cookies and the iframe doesn't load again. The cookies in part direct a redirect.
This is a bug on the iframe target side of the equation. Its not loading the cookies into safari via the iframe. It loads fine in Chrome.
I would like to know if there is a way to remove www (or add) when happens a request.
Here's my problem:
I'm inserting CSS this way: "//domain.com.br/resources/cssname.css"
if I access a page http, everything works perfectly, but when I access a page https USING "www.domain.com.br" the page doesn't load CSS files
if I insert CSS like this: "//WWW.domain.com.br/resources/cssname.css" the oposite happens, and when i access a page using "domain.com.br" there is no css.
Could I change all requests when using remove wwww or all request add www?
I saw that prettyfaces has could that be done using this?
Also, I'm using glassfish, I don't know if this can be done by there or by provider.
Thanks.
You should not be worrying about the domain name nor the context path in all your CSS/JS/image resources at all.
Instead of
<link rel="stylesheet" href="//domain.com/context/resources/style/some.css" />
<script src="//domain.com/context/resources/script/some.js"></script>
<img src="//domain.com/context/resources/images/some.png" />
or even
<link rel="stylesheet" href="#{request.contextPath}/resources/style/some.css" />
<script src="#{request.contextPath}/resources/script/some.js"></script>
<img src="#{request.contextPath}/resources/images/some.png" />
or even the clumsily longer as suggested by other answer
<link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/resources/style/some.css" />
<script src="#{facesContext.externalContext.requestContextPath}/resources/script/some.js"></script>
<img src="#{facesContext.externalContext.requestContextPath}/resources/images/some.png" />
you should actually be using
<h:outputStylesheet name="style/some.css" />
<h:outputScript name="script/some.js" />
<h:graphicImage name="images/some.png" />
And, for CSS background images, instead of
.some {
background-image: url("../images/some.png");
}
you should actually be using
.some {
background-image: url("#{resource['images/some.png']}");
}
See also:
How to reference CSS / JS / image resource in Facelets template?
What is the JSF resource library for and how should it be used?
Changing JSF prefix to suffix mapping forces me to reapply the mapping on CSS background images
Personally, I always use:
#{facesContext.externalContext.requestContextPath}/resources/cssname.css
As the path to any of my resources.
This way, I am sure that I am always getting the right path to my resource.
Hope this helps
Cheers