I added an iFrame to my Component (Vaadin 14), but the iFrame is empty. Here is my Code, i have also tried it without the DIV but it wont work. There is also no error message, does any one has a hint?
Div div = new Div();
IFrame iFrame = new IFrame("https://google.de");
iFrame.setHeight("315px");
iFrame.setWidth("560px");
iFrame.getElement().setAttribute("frameborder", "1");
div.add(iFrame);
dialogContent.add(div);
If you look at Chrome dev tools and the console, you will see
Refused to display 'https://www.google.de/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
which means that Google does not allow you to show www.google.de in an iframe.
If you change the URL to e.g. http://www.example.com/ and make no other changes, it works.
Related
I have a page where I have an iframe using the following code.
<iframe name="SL" src="https://sl.se/sv/" width="100%" height="870px"></iframe>
It has been working without any problems, but yesterday it became a blank page in the iframe. I haven't updated anything in the page so it must be something in the iframe src that is blocking for some reason. Is there another way to get this page to show inside like an iframe, but with some other code?
If you see the console of your browser, it says:
Refused to display 'https://sl.se/sv/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
which means that they have disallowed loading of the resource in an iframe outside of their domain. For more information take a look at this.
I'm currently programmatically adding a stylesheet to my content page using VB:
Dim link As New HtmlLink()
link.Attributes.Add("rel", "stylesheet")
link.Attributes.Add("type", "text/css")
link.Href = "Styles/AddNewModelStyles.css"
Me.Page.Header.Controls.Add(link)
At first glance, this seems to be working as my web page is formatted properly. However, I added new styling to the stylesheet and nothing happened. I completely removed all styling from the stylesheet, refreshed the page, and nothing changed. It seems to me like the original stylesheet is being cached, but I can't figure out how to clear the cache. I've tried F5, Shift+F5, closing browser and opening new, all to no avail. Anyone have any ideas why this is happening?
Internet Explorer Go inside your browsers tools and select -> Internet Options -> General -> Browsing History -> Settings -> View Files
Select all of them and delete them and reopen your browser.
Google Chrome Ctrl+Shift+Del -> Select from the beginning of time in the drop down -> Clear Browsing Data
I was able to figure out the solution to my problem by using Inspect element to find where the stylesheets were being loaded in. When you programmatically add a stylesheet to a content page, the stylesheet link gets added to the master web page head tag, not the content page head tag. My stylesheet was ultimately in the wrong directory (the stylesheet directory of the content page, NOT of the master page), and moving it to the master page's directory solved the issue.
I'm trying to load in an external font (using the font provider's hosted CSS) from inside a sandboxed iframe. The font provider seems to be authorizing whether the font can load or not based on the contents of the Referrer header. However, when the request is made from inside the iframe, that header is not present (according to Chrome's devtools). Setting referrerpolicy="origin" on the <iframe> element doesn't seem to change anything. Tested in Chrome and Firefox.
Do I need to add a special attribute to my <link> tag, too? Is there something else I'm missing?
I have an iframe - the iframe works when the src points to a page on the same server, allowing me to embed pages.
The same iframe will not allow me to embed pages from another server. I have tried different src= pages and different browsers on Windows, OSX and Linux. I have tried hard-coding the src attribute and setting it programatically.
I haven't worked w html for years and know click-jacking has caused some hosts to disallow their content but am confident this is not the issue.
<iframe src='myPage.html' name='i' id='i'></iframe>
works as expected
<iframe src='http://theirServer/theirPage.html' name='i' id='i'>
</frame>
does not work as expected
Not all sites allow you to embed them via iframe (such as google). if using Chrome, check your console. If you have an error like "Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'." then the site does not allow you to embed it.
Basically if the site uses the header X-Frame-Options, and has it set to SAMEORIGIN, there's nothing you can do.
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.