The iframe in frameset onload - javascript

I have frameset included in the iframe onload.
Iframe Trying to onload an iframe...
but, this code is be not fully loaded.
A.jsp is loaded. but frame in frameset is not loaded.
<iframe id = "testFrm" src = "A.jsp"></iframe>
Script
document.getElementById('testFrm').onload = function(){
console.log('test');
}
A.jsp
<frameset>
<frame src = "a.jsp"></frame>
<frame src = "b.jsp"></frame>
</frameset>
Is there a way to load the entire page of the iframe?

How about using a simple counter to measure how many frames have loaded?
// <frame> elements
var frames = document.querySelectorAll("#my-frameset frame");
// total frames loaded - initially 0
var framesLoaded = 0;
for (var i = 0; i < frames.length; i++) {
frames[i].onload = function() {
framesLoaded++;
if (framesLoaded === frames.length) {
// all frames loaded
}
}
}

Related

I cannot seem to get my iframe to resize to the page I'm referring it to

So I can't get the IFrame I have to properly resize to the contents of the page it's displaying. I'm on the latest version of chrome, and yes, I know others have made answers on how to do it, but no matter what I try nothing works. It either zooms in on the page (best try I've had yet tbh) or it just stays the same as if I've never changed anything.
I don't know S*** about javascript, so please help me out
I've already tried a ton of things, you name it, I've probably tried it.
<script type='text/javascript'>
$(function(){
var iFrames = $('iframe');
function iResize() {
for (var i = 0, j = iFrames.length; i < j; i++) {
iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';}
}
if ($.browser.safari || $.browser.opera) {
iFrames.load(function(){
setTimeout(iResize, 0);
});
for (var i = 0, j = iFrames.length; i < j; i++) {
var iSource = iFrames[i].src;
iFrames[i].src = '';
iFrames[i].src = iSource;
}
} else {
iFrames.load(function() {
this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
});
}
});
</script>
<iframe src="https://www.thundergaming.net/forums" class="iframe" scrolling="no" frameborder="0"></iframe>
Right now that just zooms in on the page, like it was resized, but the actual window stayed the same. I need the site and the actual IFrame to resize to the IFrames contents, making everything seemless as if you were actually on that page and not looking at an iframe.

Iframe with height based on page content height

in my Wordpress site I use a plugin that allows me to view external pages in an iframe that changes its height based on the height of the content.
The page I try to load in the iframe is a simple html page that calls a javascript.
This however prevents the iframe from changing its height.
Can it be solved in any way?
Thanks.
Here is the code of the html page that must be loaded into the iframe:
<body>
<script type="text/javascript" src="https://www.domain-name.com/script-name.php?param1=1&param2=22"></script>
</body>
give div ID or Call and the CSS
height : 100vh ;
try this code on load
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iframe_block' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );

Image loads after complete page load in another any section

Firstly, my main aim is to load an image after page load. Next, I don't want to specify the image tag in my HTML code so I don't need to provide any src attribute.
Suppose this is my tag which should load image after page load
<head>
<p title="image_source" style="height:100px;width:100px;"></p>
</head>
var imagetag = document.createElement('img');
window.addEventListener('load', function() {
for (var x=0; x < document.getElementsByTagName('p').length; x++) {
}
});
Personally I would use data attributes and a class to add images to the page after it is loaded.
window.addEventListener("load", function () {
var imgs = document.querySelectorAll(".img_load")
imgs.forEach(function (el) {
var img = document.createElement("img");
img.src = el.dataset.src
el.appendChild(img);
});
});
<p class="img_load" data-src="http://via.placeholder.com/350x150" style="height:100px;width:100px;"></p>
<p class="img_load" data-src="http://via.placeholder.com/450x150" style="height:100px;width:100px;"></p>
<p class="img_load" data-src="http://via.placeholder.com/350x450" style="height:100px;width:100px;"></p>
this script loads all image after the entire page completes its loading
each #a tag with class img_load will load image by taking data-scr as source of image
javascript
<script>
window.addEventListener('load', function(){
var parent = document.getElementsByClassName('img_load');
for (var i = 0; i < parent.length; i++){
parent[i].appendChild(document.createElement('img')).setAttribute('src',
parent[i].getAttribute('data-src'));}})
</script>
html
<a class="img_load" data-src="image_source.png"
style="height:00px;width:100px;position:relative;"></a>
<a class="img_load" data-src="image_source.jpg"
style="height:100px;width:100px;position:relative;">b</a>

javascript: IFrame-SRC as new Window?

I have a web application in which I have a bunch of iFrame from with source from other tools.
Now the user should have the possibility to open the iframe content in a new window / new tab, normaly I would simply add something like this:
function onButtonClick() { var src = $('#iframe').prop('src');
windows.open(src, "_blank"); }
But his would only open a new version of my iFrame context, e.g. if a user open a page in the iframe or clicked on something and javascript changed something within my iframe, the user would be loosing this value..
So, can I make a iframe Content to a new window content without loosing the dynamic state of the website within my iframe?
You cannot move around iframes between different windows without reloading, because the spec says the attributes must be reevaluated:
When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".
-- https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element
(via https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97)
Old answer:
// edit: Does not work as expected, since the iframe is reloaded on move and the original src is restored.
It is easy enough if you move the iframe out of the current page:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
// the popup might not be immediately available:
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 0);
// move the iframe back if the popup in closed
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
Example: http://jsfiddle.net/cpy2jykv/1/

Update iframe body color after load

I have a page ,page1.html that loads page2.html via an iframe . I need to change the body color of the iframe page (page2.html) to override the CSS style that's loaded on page2.html.
(both pages are on same domain). How can that be updated via Javascript ?
A bit of googling turn up this:
Scripting IFrames
It suggests window.frames[iframeName].document should work.
Since both pages lives on the same domain it should be easy.
Try this,
var changeIFrameBodyColor = function()
{
var iFrame = document.getElementById('iFrame');
var iFrameBody;
if ( iFrame.contentDocument )
{ // DOM
var iFrameBody = iFrame.contentDocument.getElementdByTagName('body')[0];
}
else if ( iFrame.contentWindow )
{ // IE
var iFrameBody = iFrame.contentWindow.document.getElementdByTagName('body')[0];
}
iFrameBody.style.color = '#ff0000';
}
Change Color
<iframe id="iFrame" src="page2.html" ../>

Categories