** This is just a theoretical question **
If I have a website containing, for example:
<head>
<style>
body {
background-color: red;
}
</style>
</head
<body>
<p>blah</p>
</body>
And embed it in another website, that has a white background, using an iframe, could I use the css in the iframe to format the current website to give it a red background. Thanks in advance
Personaly I think it is not possible directly. Because the DOM-Elements are different. Your own website has some DOM-tree you have formated it with your own CSS.
The included iframe website has an own different DOM-tree.
I think the iframe is not the right way for that. If it's possible, you can read and parse the output source code of your iframe website and modify it via php.
Or with Javascript Inspired from here:
How to change content of website loaded in iframe?
For php you can use that snippet:
$iframe_source = file_get_contents('http://www.example.com/');
Look here at the php documentation for more information:
https://www.php.net/manual/de/function.file-get-contents.php
Now you can echo and modify also the DOM-tree of the iframe-page. You've got the content and output from the page. You only need to echo $iframe_source.
Than you can use your CSS file and take the .class or id of the element which you want to format.
It has some advantages but also some disadvantages:
advantages
content of iframe is also indexable
better than iframe
you can modify it
its JavaScript free
disadvantes
you need php and an server which allows file get contents
maybe some dynamic elements in the iframe wont work
Update because it's some special case:
itty.bitty.site is very different idea from normal webpages, you can finde something about the technique behind here:
https://itty.bitty.site/#How_it_Works/XQAAAAK4CgAAAAAAAAAeHMqHyTY4PyKmqfkwr6ooCXSIMxPQ7ojYR153HqZD3W+keVdvwyoyd+luwncAksxo8PWJs+831jtAVty8rDpGXmyebtxMTP3PSa4g8/593sWue8MDcpOgi1bQyEtfa0JNQZ6T1I/xyNULg1rpwWgE2Y9BnqDq8fDN1N+nd58bizHxZrkeBhdg8inSQ/xKDX7JxpEnuwOAh4FOfn3+EHSxzhJsdQjZfh3lk4tTCDexgFND30Ea3NmmJGK84pdMtEVlcmKC5lrnUNmgoJa3QFsHJkr5595tk03idElTDVhmcQI3jSvPrkTVFTnSLeARVZXV/EUiF0y7+cR3bVkLoTkamZWDMiCTY2Xhv0LdNqWlb/xxyk6takRLrNnS8DkifXEbevTbJOUamuK7uy55kL61btF+/lYNHLWGbh1ckCYglReWWMlM0k4uuqM24okcS74tHtOW3Y5HZYBmPvRR+ItSrZPvbj3kbztOrWapUp7nAzgfIjYoBV/4xOXpFbbaHRft5GICE5Mr1PQhmW/nB63nTpnR+7UdHag8WIMa7nf+NvTPKC5MmQnKzhaMuqEnwGgcM5vkWbekimBclkGJwTGeyhxL7N6hivY+KS3H7vcOSFHXGr7K3PBIQZbywqQiimQ6B6zu4RvH7ZZ3ZN++ii00HKM0FPMcNHuOnL99vAxEl6TEFnx4J4+fwzJwNbuut30TFMBgcrE4iKAGncFIHmvOstFWxE+VlvTLC+uy6XArTO8BdfmbByGiyFv8Al7HqLAzGShdGWNzJ6cPpRwMAmWl5GNRA4qwjQAlfF1dtTwfIXSWOL7AyRwxPs27uY2cvVHCdmVVTNDYiTzHeKX6D9e2ApDRFD6pgcA9VMVP6UeOdVdmwRJ+iLTwQuCdLbVWzQ5T2i/chlihD+RawylXJQ8bKvxW9egXGcrgR5dyKaZCr8nBrArAgtRLR7PdqBQQbr5VodBvPc2FP3fZ6UuQVI1Kg4KcY44GIU5vnlM029TU+ibO2iSX3FhusTFhyOxl4TjjkuXBqA1V7Ha/Op2m8QZaP68p7AAZPOcTHAwP5PxENqIf8qS2aaG2Fiwp5rNED3LhPMjtN54klBYylr5hSAr0TD8J+XwFds8Gq9LToLE8Cq7XNJnE9RqNudIozaMWkfc6PRFjp/aH87x97nPDelKKHGyUEnGJyobw45BOhJMKzZST0VA5v+uQQo0djDXc0UXwzNRIWeBLuUJQpaXZY2gZMuLiSERgyDHg2MBI6trWsyb3ZWbFS4rm8Gq2dxfih3Kj6MdNapUo/jltQ31nx2LepJCQe9DNNF6JEMecls6dHTAM2RfHxEODSSKkF17FfjRLRAfxCK927UvizAxxggP5S/HrX6mGc5xonBy3StLd16thiAG860IdvFyBKfE6+CIhe2jzIwIofNiBILYlKA61vKkjlfZjqsUGDLi426U/Y8bdpxfg7FX1gqNEHeVM17dlBTO7pNOnKyeM2xmLoE7lr92/VIrxJ2OqNfcHu9XjrD6l71vU083VwwAq8Vencm9xLAlDyy3/6BB0kRBiJbjayYrLUbQyMGTFfEvOPmc/zJjfdnqHmg5O/0kuzf2+w5CHD426iPngjmiTo5Snlf+qW8emK/ltnQQIv2ufykH+Px3XZM+zsOclAyHI5MbCKBKeT6j5geCiz3uqci1w5ZlpRjtJWUT6zCj8Fx1eg4F4ov51gaODKV+QQWeFJSyuVTm3Nu2i7AbhKikNzb3RBeQinEh9KrhHc+o4JGezOU55h1UZtonB0+J5dfBRqHnc+6HaXfTmcLrMZjWErq15cBmC0Kx6BNyqP3uGhMUSF+OuIzffEX9fGUNDpUtCjKdbml8uF43e4fN8o10TxYkbggTcyYKI+xWHMyKM2tjOideyDwt33minfEy/JgSLsihBnBua9sfXCg32/+i2okk= there is some base64encoding ans some differnt algorithm. Maybe you can ask the dev directly on
Maybe you can use some javascript to decrypt the base64 encoded strings:
But if you read the code with file_get_contents, you only get advice that you should activate javascript. That won't work ;(
The source of this itty-bitty you can find here: https://github.com/alcor/itty-bitty
Related
I'm trying to use an HTML template as a frame, and want to load the content inside of it depending on the route.
I'm used to PHP, so I know the require($file) option embeded in the code so it will render the needed file inside of the template, so I'd like to know if there is any thing similar to it.
I've tried to search about it, but it isn't that clear. So I've thought in two options, the first one is to split the template in two parts, and put the file content in between these two when sending the response.
This is what I am aiming for in the main HTML file and be able to render it in the NodeJS response.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<h1>My App</h1>
{ require($file); }
</body>
</html>
Easy way is to read the template (with some placeholders for the variable text) into a variable. Then read the text that you want to put into the placeholders into another variable. Then just replace the placeholders. Output the final string.
You can use https://www.npmjs.com/package/mustache to render templates in node - it includes partial HTML templates and should feel familiar to your PHP experience.
(Just to answer you question directly - no, HTML by itself is static, and with exception of iframe, there is no safe way to include partial HTML within another HTML page.)
you can use the iframe HTML object to embed it inside your file
<iframe src="<source html file location>"></iframe>
No. There's no way to add a 'variable' in HTML since HTMl it static. You need a dynamic language for that such as:
mustache.js
handlebars.js
pug/jade
Or if you're feeling really passionate about web development, and you are willing to begin hating html, then you should defiantly check out:
react.js Personal Favorite
angular
Let me know if you have any questions!!
I want certain content on the website (data tables) to be available for including in other pages (like articles) on the same web site. I imagine the "Paste this code into article where you want the table: [..]" route.
I don't want an iframe, I want the html directly inserted (I already have the GET API that returns html table as one of the possible formats).
Is there a way how this is intended to be done in HTML?
I have looked around another questions but those seem to mainly struggle with CORS which is not an issue in my case.
My naive attepmt would be to make embed code like this:
<div
class="replace-me-by-src-content"
data-src="http://the.long.url" >
</div>
And the loading would be done by some ever-present javascript that would take care of each .replace-me-by-src-content element.
Is there a cleaner way without using javascript? You know - we can directly insert images or stylesheets by just providing the src attribute in certain tags and the browser takes care of doing the GET request and inserting the response. Can the same be done for plain html inserts?
You can use object to load the external page.
<object type="text/html" data="http://www.example.com" style="width:100%; height:100%"></object>
Or else you need to use jquery.
<script>$("#testLoad").load("http://www.example.com");</script>
<div id="testLoad"></div>
<object type="text/html" data="https://www.example.com" style="width:100%; height:100%"></object>
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)
A question recently came up in my programming class as to whether it would be possible to create something similar to an iframe but using only divs and javascript/css. The instructor said it was possible, but since I'm new to the whole deal of programming I'm at a loss as to how to write such code. Does anyone have a quick example as to how this would be done?
If you're talking about displaying external content in the page without the use of an iframe, you can use AJAX to load content from another page or even from a service and render it into a div. See this explanation and demo on CSS-Tricks.
Most likely your instructor was thinking of using something like
<div style="width:500px;height:500px;overflow:scroll;"></div>
Or
<div style="width:500px;height:500px;overflow:auto;"></div>
Both of which can be used to produce a fixed-size div with scroll bar overflow. You can even load content from another page using AJAX and insert it into the div. However, unlike an iframe, they cannot be used to display content from another domain (unless it allows CORS.)
I would say it is possible and iframe is essentially embedding a content resource from another location be it on the local domain or external domain. Replicating this could be easy or difficult in the type of request you are wanting to make a simple way using jquery would be to have something like this
$.ajax({ url: urlToResource, success:function(data){
$('.contentDiv').html(data);
});
<style type="text/css">
.contentDiv {
overflow:auto;
width:200px;
height:200px;
}
</style>
<div class="contentDiv"></div>
Again this is all dependant on what type of resource and whether the remote domain has an ajax block on it there would be another way to get round this though with a simple php file;
<?php
print file_get_contents("http:://pathToResource.com");
?>
That should be enough to start investigating yourself. But as a tip try and avoid ever using iFrames they are more hassle than they are worth and are quite dated in regards to current technologies such as html5 etc.
I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.
While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the <script> and <link> tags into the head of the page, then loading the html into a <div> screen.
The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).
My question is: Is there any way to limit the "scope" of an external .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?
UPDATE Support for this feature has been dropped. Please seek other options
Original Post:
You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.
The basic idea is
<div>
<style scoped>
#import "scoped.css";
</style>
</div>
However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.
One alternative would be to use an iframe.
Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:
div#foo{
//All your css
}
And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like #media queries and so on.
While writing this, the <style scoped> is deprecated by the Chrome team.
As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags .
Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.
A simple way is adding pre-class before all selector in css file.
I find a grunt script can do this:
https://github.com/ericf/grunt-css-selectors
This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id
.parent{
// copy paste here
}
Example
Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.
I had a similar issue and found that Shadow DOMÂ can solve it easily.
let output = d.querySelector('#output')
let shadow = output.attachShadow({
mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTMLÂ content and style injected
Source