I'm attempting to write a simple html doc to automatically refresh every 5 seconds. However, I want to embed a web page into this. I've tried embed tags, object tags, and iframe tags. However, each time the page refreshes I am automatically redirected to the page that I am trying to embed. My current code version is here:
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 30000);
function reloadIFrame()
{
document.frames["meetframe"].location.reload();
}
</script>
</head>
<body>
<iframe src="http://www.meetme.com/apps/home" name="meetframe"></iframe>
</body>
</html>
Am I using incorrect tags or is there something obvious that I'm missing here?
I have been on about 10 sites similar to W3Schools, however to no avail. Could it be an issue localized to Chrome? I remember doing something similar to this back in school, though using Internet Explorer. Any help or input is much appreciated!
Try this. Using sandbox attribute of an iframe. Source and more information here.
<html>
<head>
<title>MEETME REFRESHER</title>
<script>
window.setInterval("reloadIFrame();", 3000);
function reloadIFrame()
{
var fr=document.getElementById('meetframe');
if(fr!=null) document.getElementById("container").removeChild(fr);
var iframehtml="<iframe sandbox='allow-same-origin allow-scripts allow-popups allow-forms' src='http://www.meetme.com/apps/home' id='meetframe'></iframe>";
document.getElementById("container").innerHTML=iframehtml;
}
</script>
</head>
<body>
<div id = "container">
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.meetme.com/apps/home" name = "meetframe" id="meetframe"></iframe>
</div>
</body>
</html>
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.
This drives me totally crazy now. A link (http://ns.nl) on the page inside the iframe I made wont work (http://newsoundsofeurope.com/videos/playlisttest). Chrome doesn't do anything after the mouse click. Firefox just opens a blank page inside the iframe. Anyone can help?
Page with iframe:
<html>
<head>
</head>
<body>
<iframe src="playlist_iframe.php"></iframe>
</body>
</html>
Page inside iframe:
<html>
<head>
</head>
<body>
<img src="026.png"/>
</body>
</html>
Remove target="_self and will work.
If you want to open that link with a new page, you need to set the target="_blank"
<img src="026.png"/>
Also need to set the 'allow-popups' permission in the iframe
<iframe src="playlist_iframe.php" sandbox="allow-popups"></iframe>
https://www.w3schools.com/tags/att_iframe_sandbox.asp
I have a website which shows a remote document inside an iFrame. That document contains relative paths to its resources like images, so the absolute url is injected by JavaScript as base-tag into the remote document's head. This works perfectly and looks like this:
<html>
<head><title>My application</title></head>
<body>
<h1>Take a look at this document:</h1>
<iframe src="http://www.remote.com/a/b/c/">
<html>
<head>
<base href="http://www.remote.com/a/b/c/"</base>
</head>
...
</html>
</iframe>
</body>
</html>
This works perfectly as intended. Now it may happen that my application itself is loaded into an iframe like this:
<html>
<head>...</head>
<body>
<h2>Take a look at that application:</h2>
<iframe src="http://myapplication.com"></iframe>
</body>
</html>
where the URL http://myapplication.com loads exactly the above code into the iframe.
This also works perfectly in most tested browsers (Chrome, Firefox, ...), but is doesn't work in IE11. The image resources from the inner site are now loaded from myapplication.com (where they don't exist) instead of remote.com/a/b/c. So the inner document's base-tag is ignored in this case.
Does anybody have a solution for this problem?
I'm struggeling with the Soundcloud HTML5 Widget API. The Methods and Events are working fine, but i can't log the getters. I've been looking around in the Soundcloud API documentation but i can't find the problem. The Soundcloud Playground is working fine, but the examples they give in their blog http://developers.soundcloud.com/blog/html5-widget-api, arent. So i'm wondering, am i missing something here, or is there something wrong with the API? This is my stripped HTML, wich is not working:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var widget = SC.Widget(document.getElementById('sc-widget'));
widget.bind(SC.Widget.Events.READY, ready());
function ready() {
widget.getDuration(function(durationSC) {
console.log('Duration: ' + durationSC);
});
}
$('button').click(function() {
widget.toggle();
});
});
</script>
</head>
<body>
<iframe id="sc-widget" src="http://w.soundcloud.com/player/?url=https://api.soundcloud.com/tracks/39804767&show_artwork=false&liking=false&sharing=false&auto_play=false" height="195" scrolling="no" width="480" frameborder="no"></iframe>
<button>Play / Pause</button>
</body>
</html>
Thanks for reporting this. There is indeed a problem with the API right now – a quick fix will be to use https in the widget's iframe src.
We'll try to deploy the fix as soon as possible and fix the documentation to point at https which should be used.
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.