I'd like to create a (preferably) HTML code that would load content from another, small page into the current website. The content of the small page is to be a set of anchors with images that change dynamically (thus encoding them into the page where they are to be displayed would not be practical). Is such a functionality achievable in pure HTML, or do I need to use javascript? Can someone provide a sample code of how it would look like?
Put this in your first HTML page
<iframe src="small-page.html" />
This creates a box on your first HTML page containing the contents of your second page.
You can control the height, width as well as other styles on the IFRAME.
Related
I have this weird request, please bear with me :)
I'm using javascript (AJAX) to call an API to get some data, and among these data i get html code of a complete page as preview, what i want to do is to display all these data along with the preview (interpreted ofcourse) in a table.
What i found so far, is that i can create iframe element and to write the html code into the document of the iframe, it's kind of working, but it's not very practical, as i don't have so much control over the iframe, it's so tiny in the height and the user have to scroll to see the entire page.
What is typical for this situation is to use sort of image thumbnails, and display them on the table cell? but unfortunately the API only gives html code.
What i want to ask please is, do i have any other elegant solution other than the iframe, or the iframe is my only choice?
Thank you very much in advance.
You can perform some string manipulation and extract exactly the content you need from your ajax call response. Assuming your response looks like this:
<html>
<head>
</head>
<body>
<div> <!-- extract from this div -->
the content you need
</div>
</body>
</html>
You need to extract from the div tag and append it to the tag you want to embed it to. You are dropping out the top html tags and the body tag because you already have it in your page otherwise you will need to use an iframe.
I have dynamic HTML generated based on user entered content. I want to show that HTML as A4 pages. The content may span to any number of pages as it is continous.
A code pen like this one https://codepen.io/rafaelcastrocouto/pen/LFAes helps how to show html as A4 pages. This is quite good but my problem is that I don't know in advance how much content one page can have. Will the content be rendered in first page tag or two page tags or more, I don't know since this is user generated content.
<page size="A4">
<!-----Dynamic HTML comes here, can confine to this page or overflow out of that---->
</page>
How do I show html structured into multiple pages in this scenario?
I know a hint that it might be possible with use of Javascript or query to create multiple page tags and place html chunks inside that but I would prefer CSS way of doing it as JS mechanism is susceptible to inaccuracies due to calculation of heights.
Is that possible?
Also how about using page-break-before and page-break-after property of CSS. I have used that property but that renders only in PDF, I want to show that in HTML in browser, is that possible with that?
I have a program (called 'PersonalBrain') that exports to html using very complicated javascript (based on Prototype). The script places an iframe inside a div in a main html file. The result is that a searchengine cannot index the content of the iframe. Changing the script is not an option. My idea is now to somehow get the content of the iframe and place this inside another div in the main html - in such a way that this is indexable (and then hide it with css). How would I do that? It needs to be in plain javascript (or maybe php?).
BTW: the id of the iframe is also placed dynamically.
A live example can be found on https://www.wideopenwindows.be
I'm trying to do the following. Say I have html file and it contains blank iframe within it
<iframe id="preview"></iframe>
Now I need to write a script to update content of that iframe
var preview=document.getElementById("preview");
preview.src = 'data:text/html;charset=utf-8,' + HTML_CODE_HERE;
Problem occurs when that code contains external CSS or javascript files, they just appear to not parse / execute.
How can I make iframe reload and re-run HTML parser for it's content?
Two things.
1.Why is the src of your iframe, an entire HTML page?Shouldn't you be creating an HTML page, say page1.html, and referring to that in your src?
2.You might be facing problems with external paths and CSS because the path that is given when the iframe is displayed.
3.For reloading an iframe, check this StackOverflow link.
I am building a Wordpress plugin to display a list of jobs to a user pulled from a recruiting platform API. On click of a job, a cURL request is sent to the API that pulls the job details as a full HTML page (the online job advertisement). I have everything working fine in terms of pulling the HTML, but I cannot figure out how to display it to the user.
How can I either:
Open a new tab to display the HTML pulled from the AJAX request
or
Open the full HTML within a div on the same page (i.e. a modal)
I would prefer to open the HTML in a new page, but don't know how to use jQuery to do this... Opening within the page in a modal is also fine, but as far as I understand iFrames (which I would rather not use anyway), you have to pass a url (and I simply have the full markup). Is there a way to display this within a page, perhaps using canvas? It carries its own links to CSS and Javascript that need to apply only within that sub-page.
EDIT:
As a clarification, I know that I can simply place the HTML within the page. My issue is that it is a full page. This means it has a <head> <body>, and its own CSS links. Just putting it in the page messes with the rest of the CSS and produces invalid HTML.
This is what I already have:
$.post(ajaxurl, data, function(response) {
$('.sg-jobad-full').html(response);
});
It places the response within the page perfectly well... but it messes up the page by introducing a <body> within a <body> and competing CSS.
If you put the response in a <div>, it will mess the markup because css/js/meta definitions may not be put into the <body>.
If there is a way to retrieve the data without the markup already beeing in, you could parse the data and let it print via a javascript, which is the method I'd prefere.
According to your comment, you should really go with iframes, all other methods will alter your markup to have <html> tags inside <html>, which is very bad practice.
Iframes can be styled just like a <div> element, and it is realy not dirty to use iframes for the purpose you mentioned (it does not load from a foreign host, it is not hidden, it does not track).
<iframe class="job-offers-plugin" src=".../wp-content/plugins/yourplugin/getJobs.php">
</iframe>
Put some style into it like width;height;padding;margin;overflow; place it where you like..
This helps you with the databse:
Using WPDB in standalone script?
Add permalinks to your plugin script:
http://teachingyou.net/wordpress/wordpress-how-to-create-custom-permalinks-to-use-in-your-plugins-the-easy-way/
If you get the full HTML in an jQuery.ajax(...) call, you can always just show it in a certain div on your page.
$.ajax({
success: function (resp){
// resp should be your html code
$("#div").html(resp);
}
});
You can use the $(selector).html(htmlCode) everywhere you want. You can insert it into modals, divs, new pages...
If you have to inject a whole HTML page you can:
strip the tags you don't need
or
use an iframe and write the content to that iframe: How to set HTML content into an iframe
iframes aren't my favourite thing... but it's a possibility