I've checked out plenty of other questions but still no luck.
I'm working on my local machine in chrome.
I've got welcome.html (main page) and test.html (iframe page)
then I have my style.css.
The Goal: Have my test.html as an iframe inside my welcome.html page. But have the iframe (test.html) be styled using jQuery.
So I have this in my welcome.html
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $head = $("iframe").contents().find("head");
$head.append($("<link>", { rel: "stylesheet", href: "style.css", type: "text/css" }));
});
</script>
and then this inside the body tag
<iframe name='iframe' id="iframe" src="test.html"></iframe>
iframe is working but no styles are being attached when I inspect the iframe.
I'm assuming you can't directly edit the iframe source? The simplest solution would be to just add the <link> tag there.
However, your real problem may be that it can't find the css file. The src attribute in the <link> tag needs to be relative to the location of the iframe. If the iframe is on some other domain, you'll need an absolute path (in your case maybe "http://localhost/whatever/style.css").
Related
In the following code the src attribute of iframe always shows b.html in devtools insepct, even after clicking on the link in the b.html page
index.html
<html>
<body>
<iframe src="b.html">
</iframe>
</body>
</html>
b.html
<html>
<body>
link
</body>
</html>
d.html
<html>
</html>
The spec doesn't appear to explain why this is the case, other than by stating that the WindowProxy operates independently of the element itself (for what it's worth). It does confirm that this is expected behavior (W3C HTML5, WHATWG HTML):
If the user navigates away from this page, the iframe’s corresponding WindowProxy object will proxy new Window objects for new Document objects, but the src attribute will not change.
As #BoltClock said, the src= attribute of the iframe doesn't change but you can get the new url of the iframe by accessing its
document.getElementById('my-iframe').contentWindow.location.href
but your iframe has to be on the same domain as the page hosting it.
I have a webpage with a "html reference manual", where I sent anchored URL links, e.g. like this:
http://www.vanillaware.de/plotFields/docs/html/plotFieldsDoc.html#prp/x
This opens automatically the page in the browser jumping to the referred anchor. This is the behavior I expect.
Now I want to embed this HTML page within another page using <iframe>, but still being able to send an URL link with an anchor. Unfortunately this doesn't work with this simple code:
<!DOCTYPE html>
<html>
<body>
<p><iframe src="plotFieldsDoc.html"></iframe></p>
</body>
</html>
Using a similar URL link as above:
http://www.vanillaware.de/plotFields/docs/html/tryUrlAnchor2.html#prp/x
Did I made something wrong and is there a simple way to reach my goal?
Use an inline onload event handler to reassign location.hash inside the iframe to match that of its parent page:
<!DOCTYPE html>
<html>
<body>
<p><iframe src="plotFieldsDoc.html" onload="this.contentDocument.location.hash=location.hash"></iframe></p>
</body>
</html>
I have a Scala-Spray application/project and I'm trying to serve an HTML page when I select a certain route.
In this HTML page, I need to "include" some files from my path, but I'm missing something since I can't load them properly, as in this example (js file, but it could be an image as well).
Here's the code I wrote to "load" a javascript file in my html page:
path("myPath") {
respondWithMediaType(`text/html` ) {
complete {
var html =
"""
<html>
<head>
<script type="text/javascript" src="file:///home/myUser/Desktop/myFile.js"></script>
<script type="text/javascript">
$(function() {
...
});
</script>
</head>
How can I refer to my "local" files in order to load them in the HTML page?
What Am I missing?
Thanks in advance
FF
I don't have access to update the title element for many of the pages on my site (a limitation in the e-commerce software I'm using) and I'm wondering if the <title> element can be placed within the <body> element.
This is what the W3C has to say about it:
7.4.2 The TITLE element
Every HTML document must have a TITLE element in the HEAD
section.
So no, you can't put the <title> tag inside the <body> tag.
Contact the developer(s) of said e-commerce software and see if there's a way to change the title of the page, either through the HTML directly or through the administration user interface of the e-commerce software. If you can't, get a different e-commerce software solution.
No. It can't be, doubly so if there's already a <title> tag in <head>. If you don't have access to the <title> in <head>, you need to get access.
If you absolutely can't, and there's not already a <title> tag, some tests reveal that it will work in <body>. However, you shouldn't do this - it's invalid markup.
An alternative is to do it using JavaScript placed in the <body> (which you shouldn't do, again):
<script type="text/javascript">
(function() {
function load() {
document.title = 'The new title';
}
if(window.addEventListener) {
window.addEventListener('load', load, false);
} else if(window.attachEvent) {
window.attachEvent('onload', load);
}
})();
</script>
That's only a last-ditch "alternative," though.
The title tag has to be in the head tag.
HTML spec:
"Every HTML document must have a TITLE element in the HEAD section."
I want to preload a JS file and a CSS file from the landing page to optimize the main site load, after the conversion in the landing. I was looking for information about this and finally tried to get this done using:
var xhr = new XMLHttpRequest();
xhr.open('GET', 'jsUrl');
xhr.send('');
xhr = new XMLHttpRequest();
xhr.open('GET', 'cssUrl');
xhr.send('');
With Firefox this great, but with Chrome it seems that the XHR calls are cached in a different cache than the css and js files.
We don´t use JQuery, the landing page must be lightweight (less load, more conversion rate).
Do you have any recommendation of another way to solve the original problem? (preload components)
Do you know how to make Chrome cache these requests?
This is a tested solution in a high volume site that works.
First, to avoid a competition between the landing page resources and the preloaded resources for the bandwith you could delay the load with javascript:
var prevOnLoad=window.onload;
function onLoadPreloadComponents() {
if(prevOnLoad) {
try{
prevOnLoad();
}catch(err){
}
}
preloadSiteComponents();
}
window.onload=onLoadPreloadComponents;
This is not the way I solved this because in my use case a flash event (using the Flash to JS brigde) signals when the landing was finally loaded. But the previous code must works as well. When the load page event is fired by the browser this function will execute previous onLoad code and the preloading.
I put an empty div cointainer where the iframe will be loaded.
<div id="mainSiteComponentsContainer" style="display: none;">
</div>
And the function code is:
function preloadSiteComponents() {
try{
document.getElementById('mainSiteComponentsContainer')
.innerHTML=
"<iframe src=\"http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html\" frameborder=\"no\" height=\"0px\" width=\"0px\"></iframe>";
}catch(err) {
}
}
As you could see, the link url to iframe is dynamic, it changes between differents plataform versions (different deployments) to avoid unwanted browser cache with a new deployments.
The HTML that will be in the iframe could be something like this (for example):
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
Here you could see the links to the components that I want to preload.
Finally, the div cointainer will have the iframe. After the onLoad event:
<div id="mainSiteComponentsContainer" style="display: none;">
<iframe width="0px" height="0px" frameborder="no" src="http://www-components.renxo-cdn.net/preload-site-components-data-url-scheme-version-1.2.84-css-1.0.53.html">
<html class=" gecko win js" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="noindex,nofollow" name="robots">
<script src="http://www-components.renxo-cdn.net/scripts/lib-1.2.84.js" type="text/javascript">
<link href="http://www-components.renxo-cdn.net/styles/skin-data-url-scheme-1.0.53.css" media="all" type="text/css" rel="stylesheet">
</head>
<body> </body>
</html>
</iframe>
</div>
You could see the working solution here.
Use Firebug to see the delayed load of this components.
Random thought:
Maybe you could include a hidden IFrame in your landing page which loads a page that does nothing but include your javascript and CSS files. If you trigger the loading of that IFrame in your javascript then it shouldn't block the landing page's loading or rendering, yet the script and css files would be loaded by the browser in the same way that it would for any other page.
Haven't tried this but adding this to the BOTTOM of your landing HTML should work:
<!-- Preload -->
<img src="/path/to/preload.js" style="display:none">
<img src="/path/to/preload.css" style="display:none">
The browser doesn't actually care that the resources aren't images it should fetch and cache them anyway. Browser typically load resources in page order so you wont delay other elements and with display:none you probably won't block rendering either.
Downside is you won't preload images defined in the CSS or #imports unless you preload them manually.