I would like to use a font in an iframe which I know will be loaded already in the parent html page: can the iframe css simply refer to it as if the user has it already? or will I have to load it again via #font-face?
A more general approach complementary to #Mr Lister s comment:
An inline frame (<iframe>) loads another HTML document within your HTML document and embeds it. Simplified you could say it is a website within a website.
The embedded CSS does not interfere with its parents CSS or the other way around since they belong to separate documents and only live within them. As #Mr Lister already pointed out, resources that are referenced in both documents will not be loaded twice.
Any changes to the appearance should be made in the child document itself rather than after loading it in an iframe. You could, however, use JavaScript and its libraries to inject basically anything (stylesheets etc.) into the loaded document. For security reasons browsers generally only allow this for iframes that have to the same domain as the parent. Check out this thread to learn more about injecting via JavaScript: Override body style for content in an iframe.
CSS does not cascade into documents loaded into iframes, they are separate documents.
You will need to include #font-face in the stylesheet loaded into that document.
The file shouldn't be downloaded again, but loaded from the browser's local cache (assuming the server hosting the font has a reasonable configuration).
Related
I am looking to embed a HTML5 file on a webpage and keep its source hidden.
Originally, I used an iframe, however, anyone could go directly into the webpage's source code and copy the iframe's src, and then paste it as a webaddress, and be taken directly to the non-embedded version. The embedded version is important to me for the site's layout.
Is there a way for me to disable access to the iframe's src file (which I seriously doubt as then the iframe presumably wouldn't work), or do you have a recommended alternative?
Thank you
The short answer is no. This is not possible.
Even if there was a possibility to prevent the browser from displaying the source code, it would still be possible to view the raw HTML code by just sending a raw HTTP request.
The only possibility is to just not sending the HTML-Code. But without HTML, no content is displayed. The browser can only display any content based on the HTML code.
I have signed up for Google Analytics, and it gave me code to paste on every page I want to track, so can I paste it in my .css file as I have included that file in every webpage? So, may I expect that that google analytic code is included on my every webpage?
Your google analytic code would then be interpreted as CSS, and largely discarded by browsers. Anything that isn't will be read as CSS, and thus do Fun things.
You need to toss it into its own file (probably something .js assuming it's Javascript) and include that on every page- or if it's a widget (HTML rather than just JS), you'll have to insert the widget itself onto each page.
And uh... no offense but.... Honestly surprised I managed to give this one a straight-faced answer. CSS is non-executable. Microsoft had js in it for a while (IE LTE 7 woo) but I don't believe that's been something anyone has done since due to it being too large of an attack vector and extremely lagy.
There are multiple ways to add Analytics tracking to your page, and placing the tracking code in your .css file is not one of them. The only thing that should be placed in a .css file is css.
You need to include the snippet Google provides in every page you'd like to track before the closing </head> tag. You can also use the Google Tag Manager.
This is what the official Google Analytics website says:
Paste your snippet (unaltered, in its entirety) into every web page
you want to track. Paste it immediately before the closing
tag. If you use templates to dynamically generate pages for your site
(like if you use PHP, ASP, or a similar technology), you can paste the
tracking code snippet into its own file, then include it in your page
header.
You cannot add javascript tracking code to a css file and expect it to be executed. Mixing js and css in a single css file is nothing a browser does (the closest were computed styles on Internet Explorer which had vaguely script-ish syntax). I still suspect you have meant to ask for an external javascript file, which would indeed work.
You can, however, do Google Analytics tracking via a css file.
For that you would construct a tracking url via the measurement protocol and set it for example as a background image to an element if your page
<html>
<head>
<style>
body {
background-image:url('https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-123456-1&cid=555&dp=%2Fmy%2Fdocument%2Fpath');
}
</style>
</head>
<body>
</body>
</html>
In a similar way you could do event tracking etc, just add a class with a properly formed tracking url as background image when you want the event fired.
However this comes with a few caveats:
You would need to generate all parameters, including the client id yourself and pass them dynamically to the css.
If you were to use a CSS file, you'd need to generate it dynamically with some programming language on every pageview (plus you'd need to maintain the session yourself so you get same client ids on subsequent pageviews and visits).
Usually we strive to have the CSS file cached, so the user has to download it only once. That would not work here, or you would track only one pageview per visit.
I'm sure there are even more problems with this approach and while interesting in theory it is nothing something I would recommend. But in the spirit (if not the words) of the question I thought I#d mention it.
No, css files are for css only.
However, a common approach is to create a new html file (often called default.html) with the code from Google Analytics and a link to your css. You can then include this file on every page instead of just linking to your css.
HTML5 defines several embedded content elements, which, from a bird's-eye view, seem to be very similar to the point of being largely identical.
What is the actual difference between iframe, embed and object?
If I want to embed an HTML file from a third-party site, which of these elements could I use, and how would they differ?
<iframe>
The iframe element represents a nested browsing context. HTML 5 standard - "The <iframe> element"
Primarily used to include resources from other domains or subdomains but can be used to include content from the same domain as well. The <iframe>'s strength is that the embedded code is 'live' and can communicate with the parent document.
<embed>
Standardised in HTML 5, before that it was a non standard tag, which admittedly was implemented by all major browsers. Behaviour prior to HTML 5 can vary ...
The embed element provides an integration point for an external (typically non-HTML) application or interactive content. (HTML 5 standard - "The <embed> element")
Used to embed content for browser plugins. Exceptions to this is SVG and HTML that are handled differently according to the standard.
The details of what can and can not be done with the embedded content is up to the browser plugin in question. But for SVG you can access the embedded SVG document from the parent with something like:
svg = document.getElementById("parent_id").getSVGDocument();
From inside an embedded SVG or HTML document you can reach the parent with:
parent = window.parent.document;
For embedded HTML there is no way to get at the embedded document from the parent (that I have found).
<object>
The <object> element can represent an external resource, which, depending on the type of the resource, will either be treated as an image, as a nested browsing context, or as an external resource to be processed by a plugin. (HTML 5 standard - "The <object> element")
Conclusion
Unless you are embedding SVG or something static you are probably best of using <iframe>. To include SVG use <embed> (if I remember correctly <object> won't let you script†). Honestly I don't know why you would use <object> unless for older browsers or flash (that I don't work with).
†As pointed out in the comments below; scripts in <object> will run but the parent and child contexts can't communicate directly. With <embed> you can get the context of the child from the parent and vice versa. This means they you can use scripts in the parent to manipulate the child etc. That part is not possible with <object> or <iframe> where you would have to set up some other mechanism instead, such as the JavaScript postMessage API.
One reason to use object over iframe is that object re-sizes the embedded content to fit the object dimensions. most notable on safari in iPhone 4s where screen width is 320px and the html from the embedded URL may set dimensions greater.
Another reason to use object over iframe is that object sub resources (when an <object> performs HTTP requests) are considered as passive/display in terms of Mixed content, which means it's more secure when you must have Mixed content.
Mixed content means that when you have https but your resource is from http.
Reference: https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
iframe have "sandbox" attribute that may block pop up etc
I would like to embed an web page into another web page. Since due to some issues I cannot use a iFrame. I tried with tag. But it gives some weird problems in IE. The links inside the embedded web pages does not open up in the full body of the window in IE. Is there any solutions to it??
I'm also looking for some ajax based solutions, but I'm not sure whether it will work as my target page is having lots of external javascript files as well as CSS.
Any solutions or ideas will be of great help.
You can save both pages with extension .php and where you want the document inside the other document add this code:
<?php include("myOtherDocument.php"); ?>
(The document you are adding should only have the code that belongs there, do not repeat the body tags, head, html, doctype etc...)
You also cannot see the results without using your local server or uploading to a server.
I have been trying to embed an iframe to a wiki page that I'm working on based on wikimedia but not the actual wikipedia without any luck.
I've also tried googling on this topic, but have been fruitless. Will appreciate any advice on this pls.
Thks.
There's the easy way and the slightly harder way.
The easy way assumes you don't have a publicly editable wiki (i.e. non-logged in users cannot edit and creating an account is not automatic).
If that's the case, simply set $wgRawHtml to true and you will be able to input any arbitrary HTML into your pages by wrapping it inside the <html> tag.
Here's an example:
This is '''wikitext'''.
<html>
This is <em>HTML</em>.
</html>
Now, if you have a publicly editable wiki you most definitely don't want users to be able to add any and all HTML to your wiki. In that case you can use the Verbatim extension. This will embed the contents of a page in the MediaWiki namespace as-is, preserving any HTML markup.
For example:
<verbatim>Foo</verbatim>
Would embed the contents of MediaWiki:Foo.
Hope that helps.
I suggest you use the IDisplay extension.
The iDisplay extension allows MediaWiki pages to embed external web pages. It also allows setting an option to put a blocking page in front of it, so you prevent loading the page until the user wants to load the page.
It's implemented with an <iframe>.