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>
Related
** 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
Maybe my problem is simple because there are many similar requests, but I can't find the solution to my problem.
I build an HTML-website which makes a form request to a server. The server responses with a JSON text to this iframe on the website:
<iframe name="json_result" src=""></iframe>
The problem is, that this json string is on one line and with that not human-readable. How can I make it pretty? (with breaks and tabs, like firefox is doing it normally by its own in a new tab)
I know there are solutions like JSON.stringify() or google/code-prettify, but I don't know how to get the response json text from the iframe into these functions or maybe build some css classes around the iframe which formats the incoming json automatically?
It seems like you want to transform the content of the IFrame from the parent site. I don't think this is possible without reading it using AJAX instead of via an IFrame.
I'm using an ASP classic app to create HTML <table>...<td> cells with SVG drawings encapsulated in an <object> tag, which works fine. Here is what the <object> looks like:
<object data="http://myserver.com/foo.asp?svgdata=data/bar.xml" type="image/svg+xml" border="1">Browser unsupported</object>
When the page loads, <object> issues a GET to the server (and ASP), with a parameter value in its data= parameter. My challenge is I'd like to create the svgdata= argument on the fly, and send a lengthy data payload in it to the server. So I'm hoping I could use POST to do so, since GET is size-restricted.
Is there a way to coerce the <object> to issue POST instead of GET? Assuming I could navigate the particularities of passing a correctly constructed svgdata= attribute.
Note, the final form of this is a pure HTML + SVG document in the browser DOM, it's not a Form or interactive otherwise.
Thank you, Stackoverflow readers!
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.
In the past I was using iframe but it displayed all the webpage urls contents in full.
For example: I have saved the following code in a file named "trial.html" :
<iframe src="http://stackoverflow.com/unanswered" width=1100 height=1500></iframe>
<iframe src="http://stackoverflow.com/questions" width=1100 height=1500></iframe>
When I load my file "trial.html" in firefox it shows the two urls properly. ;)
But, for instance, I would like that my webpage show me only the top right "vote" part (gray color) for the first url. I notice that it has the following code :
<div class="module">
<div class="summarycount" style="text-align: left;">11,308</div>
<p>questions with <b style="color: maroon;">no upvoted answers</b></p>
<p>The highest voted unanswered questions appear first, then the most recent ones. </p>
</div>
Is it possible to display only the part <div class="summarycount" or the <div class="module"> part?
Thanks in advance ;)
Frames are just another viewport, same as your basic browser window, and all a viewport does is provide a place to display documents. Whole documents.
If you want to parse a document, or indeed many documents, to pick and choose sections of them and merge into another document, you'll have to engage a server-side language to load those documents up and do the surgery for you. As always, I recommend XSLT for this where the documents are well formed, but every language is capable of doing this.
If you really really wanted a guerilla option, IF you have control over the documents AND you don't have x-domain worries, you could do some JS DOM manipulation to read from iframe loaded documents and copy the important nodes into the parent document, deleting the iframe as you go, but it's nothing like as clean or reliable.
I think this can also do the trick (but it won't do it imho for robot-no-follow html file websites):
Build a Web Page Monitor with Google Docs and Track Changes Automatically
http://www.labnol.org/internet/monitor-web-pages-changes-with-google-docs/4536/