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!
Related
I want to put my header in an iframe-element so that I can change the headers of all subpages of my website in one css. But when I click on a link in the header, the new page loads only in the iframe element. Is there any way to make the new page load in the whole browsertab rather than in the iframe?
The link target determines which viewport a link opens in. To open in the parent window use _parent.
...
That said, using iframes to include common content is a really ugly approach to the problem with accessibility and SEO implications. I'd strongly suggest you consider using a Static Site Generator or one of the other options in this answer instead.
You can link a css file in the head part of your html code like so:
<head>
<link rel="stylesheet" href="your-header-styles.css">
</head>
So you don't have to use iframes.
You can't access or control the parent page from within an iframe.
If you really wanna do it the old-school way, you can use a frameset. But this isn't supported anymore in HTML5.
While I'm trying to switch between different sections of my webpage I am getting the following page as shown in the image. How can I solve this?
you need to provide context for your question for people being able to help you. I imagine you are trying to navigate between different html files, by clicking into an anchor tag, is that correct?
Go to next page
So in that case, you might be adding a wrong relative route, otherwise I think you should add more context to your question.
If you are trying to switch between sections on your webpage. Try adding section and giving them id. Then from any anchor tag you can reach the section by adding the following code.
Section 1
you can use jquery
$(".div").load("index.php .yoursection");
To switch between sections on your webpage,Use the id selector ,
Example:
<p id="opening">Hyperlinks are utilized by a web browser to move from one page to another...</p>
Now add the anchor tag to link,
Opening
"Opening" will be displayed as a link on the webpage. On clicking it, you will be switched on the same webpage where the id is "Opening".
In this example it is the paragraph tag.
If you trying to switch into another webpage,
Go to home page
I am using django cms to create my website and a google calendar. However, when I added the code, it comes up as just plain code and won't display the calendar.
here is the link to my site:
http://138.68.6.151:8000/en/events
Can someone explain how to fix this?
I did some more research and found that I had to add the following inside my settings.py
TEXT_ADDITIONAL_TAGS = ('iframe',)
TEXT_ADDITIONAL_ATTRIBUTES = ('scrolling', 'allowfullscreen', 'frameborder',
After going to your site and using browser's console to inspect your iframe, I found that the iframe tag is improper (like a text in quotes) and therefore its not rendering properly. In your paragraph tag, the iframe tag should be in following way:
<p><iframe frameborder="0" height="500" scrolling="no" src="https://calendar.google.com/calendar/embed?height=500&wkst=1&bgcolor=%23FFFFFF&src=6uemf0u3aqg89knqb4ndic0n04%40group.calendar.google.com&color=%23853104&ctz=America%2FChicago" style="border-width:0" width="500"></iframe></p>
To verify this, after playing at front-end level I got following results.
Previous state (also notice the HTML code on the right)
After making above mentioned changes in the code at frond-end (notice on the right that now the iframe tag is highlighted as a tag which was not the case previously):
So the iframe tag is not rendering properly in your case.
Since you are using iframe in Django CMS, recipe mentioned in this stackoverflow post will assist you.
I am using a jQuery CSS style on the main portion of my website. It works fine. Now, I also have a sub-directory of my website which should not use the style. When I manually navigate my browser to the sub-directory of the website, no style is applied which is what I want. When I click on a link to the sub-directory from the main area, however, it is applying the CSS style from the main part even though I am not referencing this CSS anywhere in the HTML of that sub-directory. If I refresh the browser, the style goes away.
Please can someone help me understand what is going on here? Thank you.
You are using jquery mobile, which by default loads the content of links via ajax. That means you don't have a page refresh when clicking on a link. The contents get dynamically inserted in your document which still has all your css.
More information here.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html
You have to disable ajax for that link. More information here.
jquery-mobile - how can I bind disable ajax links to a certain class
Clear your history and browser data, then refresh and try.
Try to open the link in chrome and using the developer options (F12)
look for the resources it is referencing. If the page is referencing
the CSS files then either Javascript is making the referencing or
you have accidentally kept the resource link. Let the forum know your findings.
Edit
Somebody seems to have done what I have mentioned and has come to conclusions that they are because of AJAX. The steps I have mentioned above would let you do that all by yourself.
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>