This may be a bit of an x y problem, so I'll give a small bit of background to start with. I am attempting to make a simple dashboard which loads a number of different sites and which cycles between them. To do this I have set up a simple local server along with a html page which gets populated with the different sites in distict frames and then cycles between them by hiding/showing each one in turn. In simple terms, the page looks like this:
<html>
<head></head>
<body>
<iframe id="frame1" src="www.example1.com"> </iframe>
<iframe id="frame2" src="www.example2.com"> </iframe>
<iframe id="frame3" src="www.example2.com"> </iframe>
</body>
</html>
Now, what I would like to do is be able to force a reload of each frame so that the data is up to date. For most sites I can do this with:
document.getElementById['iframe.src'] = document.getElementById['iframe.src']
However, for sites where content changes aren't reflected in the URL, this won't work and will instead 'refresh' the page back to the home page. What I want to do is esentially submit an F5 sort of refresh direct to the frame or use:
document.getElementById("iframe_id").contentWindow.location.href
or
document.getElementById('YOUR IFRAME').contentDocument.location.reload(true);
But, due to CORS, I can't do this. Considering the sites are external sites that I am viewing and have no control over I'm struggling to come up with a way to get around this issue. Is there something pretty obvious that I am missing?
You're not missing anything, that's how the web works. You have no control over a page from another domain, except if you use postMessage() but thas implies the target page acknowledges your messages and reacts accordingly.
In other terms, you won't achieve this unless you have control over the pages you are embedding.
Rather than try and tell the page in the iframe to reload, which you will be blocked from doing. You could instead update the URL in the iframe tag, by adding some random crap to the end of the URL
So for example news.bbc.co.uk would become news.bbc.co.uk?qaz=1, then change this each time you want it to refresh.
You can achieve something like time by removing iframe element & creating again at same place,
this will seems like same page is being refreshed.
working example : this will refresh the frame every 5 second.
<html>
<head></head>
<body>
<div id="frameContainer1">
<iframe id="frame1" width="500" height="500" src="http://www.example.com"> </iframe>
</div>
<script type="text/javascript">
window.onload = function() {
setInterval(function(){
let elem = document.getElementById('frameContainer1');
var elemFrame = document.getElementById('frame1');
elem.removeChild(elemFrame);
var newFrame = document.createElement('iframe');
newFrame.id = 'frame1';
newFrame.setAttribute('src', 'http://www.example.com');
newFrame.width = 500;
newFrame.height = 500;
elem.appendChild(newFrame);
},5000)
}
</script>
</body>
</html>
Related
I am making a single page application using injection function :
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
function injector(url) {
window.parent.document.getElementById("iframe").src = url;
}
</script>
There are 2 urls in this simple example. I can save the one that has been clicked on local storage. But:
how do I explain in JavaScript (When the page is refreshed, use the last used url automatically)
How to deal with going back to a previous page (a previous url). Is there a better way to deal with navigation in single page application using JS?
here, whenever you click on link it will load url in iframe and when you do fresh it will load from localstorage itself.
<html>
<body>
link1
link2
<iframe id="iframe" width="100%" src=""></iframe>
</body>
</html>
<script>
var iframe = document.querySelector('iframe#iframe');
iframe.src=localStorage.getItem('url');
function injector(url) {
iframe.src = url;
localStorage.setItem('url',url);
}
</script>
I am able to capture the user navigations from an external website opened in an IFrame into a variable and i am able to display the location in console. But i want to store the locations using an array. Is that something which i can achieve using postmessage()? Because without postmessage if i am trying to store the navigations in array then i am running into a cross domain issue. Below is my code
<html>
<head>
<title>test page</title>
</head>
<body>
<li><a href="http://mysmallwebpage.com/" target="iframe_a">Small Page</li>
<iframe id = "frame" src="" name="iframe_a" onload ="loadImage()" width = 100% height = 100% style="border:none;"></iframe>
</body>
<script>
function loadImage()
{
test = document.getElementById("frame").contentWindow.location;
console.log(test);
}
</script>
</html>
The variable "TEST" in the script is holding the navigation link. I just want to capture all the navigations in some array or file and i need postmessage() to do that. Please test the code using console understand my request.
I've been struggling with this one for a few hours now.
I am trying to attach click listeners to elements within an iframe with no src attribute. The entire page is basically inside that bad boy.
When I use "inspect element", the body of iframe looks empty (dunno if that has to do with the fact it has no src attribute.
<iframe id="CoverIframe" name="CoverIframe">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
When I enter the ID of the iframe in the console, it simply returns null, which prevents me from checking the elements it contains via contents().find() or anything else for that matter. I can only see its content (and by extension the elements on the page) by showing the source code (right click>see source).
Any thoughts on this? Is it because of the absence of src attribute? Any way I can get around it?
Thanks,
Alexis
As you noticed, you can't just set the innerDocument of an iframe like that.
However, you can use its (html-5 only)srcDoc attribute to set it,
<iframe id="CoverIframe" name="CoverIframe" srcdoc="
<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
or use a data:text/html;charset=utf-8,<html><head></head><body>hello</body></html>".
<iframe id="CoverIframe" name="CoverIframe" src="data:text/html;charset=utf-8,<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
But for the later, you will soon need to encodeURI() your page.
So the best is probably using javascript :
<script>
var yourHTML = "<html><head></head><body>hello</body></html>";
function loadFrame(e){e.contentDocument.write(yourHTML)};
</script>
<iframe id="CoverIframe" name="CoverIframe" onload="loadFrame(this)">
► Show code fiddle
I run a blog that features lots of videos and other framed content.
a typical blogpost body i pull from my database looks like this:
<p>some text</p>
<iframe src="http://example.com" width="400" height="300"></iframe>
<p>some text</p>
some posts have 2-3 iframes in them - the starting-page usually features 6-7 iframes.
i'd like to speed up the loading-time of my blog - is there a way i can make all iframes on my starting-page load asynchronously?
I'll suggest you to have all your data with you and identify the iframes to load and use setTimeout to load different set of iframes with some time gap.
As someone said in a comment, iframes load asynchronously. Perhaps what you're experiencing is a slow load of the main page while it is also loading the iframes contents. I would suggest using this technique:
<!DOCTYPE html>
<html>
<head>
<title>speedup page with iframes</title>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
some content
<br>
some other content
<br>
<iframe id="data_a"></iframe>
<br>
some wild content appears
<br>
<iframe id="data_b"></iframe>
<br>
some wild content appears
<br>
<iframe id="data_c"></iframe>
<br>
the end
<script>
$(function(){
//the iframes will only load AFTER your
//main page is fully loaded
$("#data_a").attr("src", "http://domain1.com/some/path/news.html");
$("#data_b").attr("src", "http://domain2.com/gallery/pictures.html");
$("#data_c").attr("src", "http://domain3.com/contact/map.html");
});
</script>
</body>
</html>
I hope this helps!
So, i read a lot about this topic in the last few days. Especially this article was helpful, since it discusses the actual problem I was facing: a belated onload() event that fires after all iframes are loaded.
After all, what I came up with are these lines of jQuery-Code that seems to work for me:
var src = new Array();
$(function(){
// onDomReady() store all iframe sources in array
$('iframe').each(function(){
src.push($(this).attr('src'));
$(this).attr('src', '');
});
});
$(window).load(function() {
// onload() restore all iframe sources from the array
var i = 0;
$('iframe').each(function(){
$(this).attr('src', src[i]);
i++;
});
});
So here's the deal: I tried a couple of times with and without this code and measured DomReady and Load events.
The DomReady event fires around the same time (before: 1.58s, after: 1.60s)
The Load event on the other hand fires waaay earlier (before: 8.19s, after: 1.92s)
In a way, this doesn't actually improve loading-speed, of course - anyway, in my opinion. the user experience is improved. Any comments or suggestions?
I have say 6 aspx pages that I want to display within something like an Iframe so that when I look at the page I can see an array of controls that contain a web page.
But if I use an Iframe I cannot then size the content to the size of the Iframe although YouTube does resize the content so their must be a way to do so.
So, how would I go about making sure that the content fits the IFrame or is there a better way of doing this.
Also, ultimately I would like to go to the page if the control was clicked but I am not sure that the Iframe has a click event.
So, how would I go about doing that ?
If the contents of the iframe are on the same URL as the main page then you shouldn't have any security issues and you can add JavaScript to the content pages to pass the height of their content back to the main page. Same with click events: you can have some JavaScript call a function on the parent page.
Here's an example of a main and iframe content page. The content page has a button you can click that will resize the iframe based on the height of the content.
main.htm
<html>
<head>
<script type="text/javascript">
function resize1(h) {
document.getElementById("iframe1").height = h + 50;
}
</script>
</head>
<body>
<div>Test</div>
<iframe id="iframe1" border="1" height="100" src="iframe.htm" width="200">
</body>
iframe.htm
<html>
<body>
Resize iframe
<div id="content" style="background:Red;height:500;width:50px;">
Test content
</div>
</body>
You could adapt this to suit your needs. For example, the height could be set as soon as the iframe content loads by calling the function in the onload event of the iframe content page.
Note that any JavaScript functions you want to call on the main page must be in the HEAD section.