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>
Related
I have an iframe that contains a page within it that includes links to other pages. The problem that I am having is that when the links are pressed I would prefer the entire page to be directed there and not to just load the new page up in the iframe.
Here is my code so far:
<!DOCTYPE html>
<html>
<?php Template_parts::navigation(); ?>
<iframe src="https://website.com/thepageinside" style="width: 100%; height: 100%; border: none;"></iframe>
</body>
</html>
I have seen a few things on adding target="_top" to the links within the iframe but it does not seem to be working.
My reason for using an iframe here is because it is a page that is created using a web page builder and can be updated regularly. In order to put it into our format without the css bleeding into the header/theme I used an iframe.
Thank you in advance for the help.
I'm not experience in asking questions so if I missed something or you need more info let me know.
I found that the landing page builder that my place is using actually inserts a javascript function that messes with reaching the parent from the iframe using target in the href (or anywhere). My solution was to edit out that function then use
As other sources say you can use "_parent" which sets the target of the link to what is outside the iframe which in some cases may not be the top.
One way to do it for each link:
For lookup reference you can go to: https://www.w3schools.com/tags/att_a_target.asp
using the like I did will set the default used for all links.
I'm not sure how many page builders have conflicts like this but mine certainly did. Took me hours to figure out I was not doing anything wrong!
Is there a way to embed a div from another website on my own without using anything other than HTML and/or CSS? I have not really started on JS, jQuery or PHP yet so I would like to see if there is a way without it.
The div I would like to embed is:
http://imgur.com/user/BeachyBoy/favorites/#likes
You can use an iframe to insert content on your site from another domain. Not sure you can isolate just a single div though. The code to embed external content is:
<iframe src="http://addressofsite.com"></iframe>
see here for info on how to use the tag and all its available options.
You can use iframe to implement.
For example:
<iframe src="http://www.google.com" width="100%" height="4000" frameborder="0" scrolling="yes"></iframe>
If you need to import a chunk of the page, it is not possible only using HTML/CSS. it involves cross-domain issue, so jquery, ajax..are needed.
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.
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.
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