My boss just asked me to re-create an old web part. It's basically image tiles that, upon being clicked, dynamically load another page into an iframe on that main page. Something like this:
images___________
[][]|
[][]|
[][]| iframe
|
|
She doesn't want me to use iFrames. However, the dynamic content must be stored in a separate page and have a separate URL. How can I take separate page content with a URL and load it into my main page without an iFrame?
You can use Ajax and load the content in a div.
You can use jquery.load(); to perform that. You can try it out and if you run into problems update your question with code and issue and I/somebody can help you.
The basic idea of load() looks like this
$('#result').load('ajax/test.html', function() {
//here you can update a div on your page with content from the file/page
});
An alternative is the <object> tag, or loading the content with Ajax, then adding it into an html element.
Related
I am writing a preview function to let user preview the HTML file they uploaded and do some minor editing. The HTML file will contain no Javascript and no external CSS. All CSS are either inside style tag or inline. Images, on the other hand, will always be external as we don't provide space for storing images.
iFrame is not a good solution, because:
The preview is before actually saving the content, so I cannot provide an URL for iFrame to load the page.
It is difficult to touch the element inside iFrame. As the user will be doing minor update in another text box showing the plain HTML, I will need to update the elements inside frequently.
However, if I just insert content into an <div> the repeated <html>, <head> and <body>tag will crash the page.
So, is there a way I can preview the HTML without iFrame?
if you dont want to have the main app to affect the styling of the preview, you need to use iframe. have you see iframe's content window? https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/contentWindow. this might be the answer you are looking for. So basically here you try to access the DOM of your iframe. give it a try!
preview = getYourIframeDom();
code = getYourHtmlCodeHere();
preview.contentWindow.document.open("text/html","replace");
preview.contentWindow.document.write(code);
preview.contentWindow.document.close();
I want to make a html page that act kind like google cache.
Say in my homepage HOME, I have a link A to a website B, and when I click on A, the page that comes out will display the content of another page, with a floating bar on top that has some functions of my own choices.
For example, I want my link to show google.com, but I also want to add a button(floating bar, anything) to that google.com that allows me to return to my own webpage when pressed.
Can someone provide me some useful resources for me too look at, or even better a solution template? :)
Thanks!
You could use an <iframe> in order to display an external webpage within your webpage.
Just place the url of the webpage that you want to display inside the quotes of the src attribute.
<iframe src="http://www.webpage.com" width="400" height="400"></iframe>
An iframe sounds like it may be what you need, but I'm not 100% sure after reading your description. The iframe will show content from another URL in your page. Once you have that all you need to do is style the page and use CSS/JavaScript to add in your functionality as described.
Check out this:
http://www.w3schools.com/tags/tag_iframe.asp
Either you use an iframe or you load the site via AJAX into a div (e.g. using jQuerys load() method).
Here's the general idea:
HTML:
Click Here
<iframe id="frame" src="http://www.w3schools.com" scrolling="yes"></iframe>
Some jQuery (not tested):
$(document).ready(function() {
$('#frame').hide();
$('#link').click(function () {
$('#frame').show();
})
})
Style it as necessary
Note - this answer in no way endorses w3schools.com :-) . Please see w3fools.com/
I found Kevin Gourney's answer to be most straight forward and helpful. I'm using this to work around Adobe Spark's Domain limitation and created a simple one liner index.html file and tweaked the code as follows:
<iframe src="PasteAdobeSparkPageLinkHere" width=100% height=100%></iframe>
I'm trying to capture div#map-canvas from my site, www.RichBlocksPoorBlocks.com, to make an iframe that people can embed anywhere.
Here's my iframe
<iframe src="http://www.richblockspoorblocks.com#map-canvas" style="width:600px; height:400px;"></iframe>
It goes to div#map-canvas, but it also loads the rest of the page as well. I'd like that div to be the only thing in the iframe.
Is this possible with an iframe?
To achieve this, it would be easier to create a separate .php or .html document which contains only the parts that you want to show in the iframe and exclude everything else.
So, instead of the iframe pointing to "http://www.richblockspoorblocks.com#map-canvas", it would point to something like : "http://www.richblockspoorblocks.com/map-canvas.php".
This would be a very quick and efficient way of doing what you want, and doesn't require any outside libraries or javascript.
When you call http://www.richblockspoorblocks.com#map-canvas the hash will probably cause the browser to look for a corresponding <a name="foo">bar</a> so this won't work using an iFrame.
What I would recommend doing is writing a script which you call from your iFrame which accepts the name of the page fragment to load. I know using jQuery's $.load() you can call an element ID to load a page fragment, and I think it's also possible in PHP too...
You cannot use hash links in iframes.
You can and should use, few lines of you'r favorite server side language to create the specific content you want to render and then link to it. in that way, you'r server will send out to the end user only the desired data and also it saves bandwith and loading time.
I am attempting to link from my website to an outside website but the information that relates to the user is in the middle of the outside page. Can I make the link take them to there?
Thank you in advance
If that outside page has an anchor tag in or near the content you wish to link to, yes.
<a name="releventContent">
If the above code (or something like it) is present in the outside page, you can link to it from your site like so:
clicky
I can suggest you a dirty trick that might work or not too. Steps
Open the new link in an IFrame.
Create a javascript function that will accept the string to search as parameter.
On the bodyload call that function that will search for the text in the source file.
Some SO links
Filling an IFRAME with dynamic content from JavaScript
Read IFrame content using JavaScript
Is there any way for a iframe nested in a div on my page not to reload when I change pages in the nav? Because when I change pages it will load the code of the page and the iframe on the previous page will be reloaded. Is there any way that I can select it and make that it won't reload when I change pages?
If you reload the entire page, the IFRAME element is getting reloaded with it. Unless you used AJAX or a second IFRAME, there is no way to have the whole page except one element reload.
My initial reaction is: "Why the hell would you want to do that, it sounds awful?"
The only way for this to work is to change the page content dynamically, with the exception of the iframe, rather than loading a new page.
But to answer your question, yes you can do it.
If you have all the page content except the iframe inside a div, lets call it #page and the iframe is at the same level in the DOM, or higher, relative to #page, you could use something like jQuery's load() function to load new content for everything inside the #page div.
However, if SEO or Accessibility matter to you at all, you shouldn't do this.
A users browser will cache a lot fo the content in the iframe anyway, so it shouldn't be too demanding to reload it.
If the contents of the IFRAME are simple enough it might be a simple case of using some light query string parameters to indicate the state the IFRAME is in to persist it across pages.
Your options also depend on any development frameworks you might be using (.NET, Ruby, etc.).
Otherwise, additional IFRAMEs seem to be the only other solution.