append date to iFrame src property with javascript - javascript

I'm passing a disclosure page through an iframe on an html page:
<iframe src="../disclosures/Pass_CO_GRN.html" name="disclose" width="790" marginwidth="0" height="400" marginheight="0" scrolling="Auto" id="disclose" frameborder="0" ></iframe>
I would like to add attach a datetime method to the src attribute to be sure the asset being passed (Pass_CO_GRN.html) does not cache in the client browser. The way I do this with the linked .js file (which I also don't want cached) is:
<script type="text/javascript">
document.write('<script language="JavaScript" src="linksHLS4.js?'+(new Date).getTime()+'"><'+'/script>');
and this works perfectly. I'm just not sure how to adapt it (if it CAN be adapted) to the iframe tag. anyone know?

document.write('<iframe src="../disclosures/Pass_CO_GRN.html?'+new Date().getTime()+'" ....></iframe>');
Surely.

Here is the jsFiddle. Is this what you are looking todo?
http://jsfiddle.net/2S5H5/
var frame = document.getElementById("myframe");
frame.src = "http://jsfiddle.net/user/signup/?" + new Date().getTime();

Related

i create a iframe using jquery how to set its height according to content inside it

my code is here:
$(document).ready(function(){
$('#button').click(function(){
$('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>');
});
please help about this.
thanks in advance.
Add onload="resizeIframe(this)" in your iframe and add resizeIframe() to your .js file
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
You can use iFrame Resizer
This library enables the automatic resizing of the height and width of both same and cross domain iFrames to fit their contained content.
Full documentationc an be found here, is very usefull:
github documentation for iFrame Resizer
INCLUDE THIS SCRIPT TO YOUR PAGE
<script src="https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js"></script>
SAMPLE
$(document).ready(function(){
$('#button').click(function(){
$('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>');
iFrameResize({log:true}, '#myFrame');
});
You can use .css() to set the height of that element. Hence you need to pass the id of current attribute like following:
$(document).ready(function(){
$('#button').click(function(){
$('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame" onload="setHeight(this)"></iframe>');
})
function setHeight(content){
$('#'+content.id).css('height', '100'+'px');// Whatever size you want.
}
});

MutationObserver() for check the change tag in iframe

I must check the change of a tag in an iframe in another webpage (with the same domain). I have this index.html:
<html>
<body>
<iframe id="open_app" src="/sign.php" width="800" height="600" frameBorder="0" scrolling="no" ></iframe>
</body>
...
and this is the tag in sign.php that I want check for change:
<div id="status"></div>
Now, I have always used the MutationObserver for check the change of a tag in a webpage but I now I can not do the same to test the iframe tag with the id status. I've already seen all the related discussions on Stackoverflow but nothing works. What is the best way to verify the change of the iframe tag with the MutationObserver? Thanks.

Click on element within an iframe with no src attribute

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

Resizing an iframe to fit content on multiple pages

Could somebody please show me how to fit an iframe to the content within? I have this because I am using one iframe on my website that when a link is clicked displays different pages and I would love for the iframe to fit to the content within as at the moment the iframe is too long for some page's content but too short for other page's content and it cuts the page off.
I do not really have much code to show which is relevant or that will be any help, however in line with the rules on Stack below is the code that I have so far.
I have seen some questions on here regarding the same thing but none that I really understand.
<iframe id="preview-frame" src="http://airforceadvice.com/PCS" name="preview-frame" frameborder="0" scrolling="no">
</iframe>
Add this to your head section
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe name="Stack" src="http://stackoverflow.com/" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Is this what you're looking for?

Open multiple links in same Iframe

*Im trying to Open multiple links in same Iframe, as well as changing the divsstyle.visibility(Visibility is working for me) but adding window.open I get nothing. I have the original address in a div id="testing" name="wordp" *
<head>
<script type="text/javascript">
function wordpaboutme() {
var showme2 = document.getElementById("testing");
showme2.style.visibility = "visible";
var changeme = document.getElementById("testing");
changeme.window.open.('http://mysite.com/main/about-me/','wordp');
}
</script>
<body>
<div id="testing" name="wordp" class="bloger" ><iframe src="http://mysite.com/main/" frameborder="0" scrolling="no" width="990" height="800" >
<p>Your browser does not support iframes.</p>
</iframe>
</div>
window.open opens a popup window. It doesn't change what's in an iframe.
To open a different page in an iframe, consider changing the "src" attribute of the iframe with JQuery
Also, as Collin Grady has mentioned in the comment, it is an even simpler method to specify the iframe id in the "target" attribute of the link, to do the job.

Categories