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.
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!
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 have an external page that I want to embed within my page- it has it's own scripts and CSS that I don't want to conflict with mine. Normally I'd just use an <iframe> and be done with it, but this is a mobile optimised site, and I want to avoid extra HTTP calls wherever possible. So, I want to run the request on the server side and embed the resulting HTML within my page, so that the client never has to be make it's own request.
I can do that by doing something like:
<iframe id="test"></iframe>
<script>
var doc = $("#test")[0].contentWindow.document;
var $body = $('body',doc);
$body.html('<h1>Test</h1>');
</script>
But I'd rather do this without using JavaScript at all. Is that possible? Any content I put between the <iframe> and </iframe> tags gets ignored, as it is used for compatibility reasons with browsers that do not support iframes.
Why not just use a <div>? Optionally, set a fixed width and height and add overflow:auto to its CSS.
Eventually you should be able to use the srcdoc attribute on the iframe. But, it currently is not widely supported. In the meantime your only options are javascript or just having the browser make the call with the traditional src attribute. You might look here, as I believe this stackoverflow question is quite relevant.
I want to create a static Facebook page, which should include some images and text. Are there any restrictions to what I can use? Ideally I'd simply thrown in my HTML markup, with images , styles and fonts hosted on another domain and be done with it.
If it's just images and text there won't be any problem but be aware that Facebook saves to cache the styles if you use the <link> tag and you won't see the changes you make on it right away.
Is iframe should not be used ever?
how screen reader behaves with
iframed content?
Without iframe how we can embed any
PHP page into asp.net based site?
What are cross browser alternatives?
I don't see why using an iframe is a problem.
If you can't use it then you could either use javascript to download and insert the generated html from the php page, or you could download the html in your asp.net server-side code and insert the html in a control.
Either approach should work well, but using javascript across domains is difficult.
If you go for the asp.net server-side approach you could do the following:
First insert an control where you want to include the html from the php page
In your Page_Load event use the WebClient to download the html as a string
Remove the <html>, <head> and <body> tags so that you only have the pure html markup. You may want to add any script- and css-references to your page if they are needed.
Assign the cleaned html to the Label controls Text property.
This will work, but there are a few points to make:
First you should consider if you trust the source of the php page. If you don't then you will want to do some extra cleaning of the html before displaying it
Second, you will probably want to cache the downloaded html so that you don't have to download it for each page view.