Frames are not working properly in IE and FF - javascript

Im currently working on some legacy project.
I've got an HTML-file which contains a <frameset> with a bunch of <frame> elements.
My task was to inject a js-script into this html to add a sidebar and header with some styles. I did a bunch of manipulations with frames, resizing it to make my sidebar and header fit. So far i've been testing it in Google Chrome and it worked just fine. Once i finished next step was to test it in other browsers and it just did not work anywhere. (My interest so far is in IE and FF, so i tested there).
To specify what's not working: My new sidebar and header is fine, fully rendered, but all the frames are not visible. They exists in the DOM but any size of any frame is 0 width.
Initial html works just fine in every browser.
I guess the problem is with resizing the frames, but im struggling to find any solution or even cases like mine. Maybe im missing something big about the frames.
Initial document frameset is like this:
<FRAMESET rows="32px,*">
// here is some frames
</FRAMESET>
With a js inject i rebuild this html to this:
<body>
<div id='main'>
<div id='main_menu'> //menu
</div>
<div id='main_frameset'>
<frameset cols="81px,*" border="0" framespacing="0">
<frame></frame>
<FRAMESET rows="32px,*"> <-- Initial frameset
</FRAMESET>
</frameset>
</div>
</div>
</body>

An HTML document with a <frameset> has it instead of a <body>. It isn't an element you can drop in anyway (that's an <iframe>).
If you want to add a new sidebar and header, add them as frames.

I found the solution to my problem.
Thanks to #Teemu.
If somebody meet something like i did the best solution is to wrap your deprecated part in <iframe> element. In my case it transformed my DOM to this:
<div id='main_frameset'>
<iframe>
<#document>
<head></head>
<frameset cols="81px,*" border="0" framespacing="0"> <-- Previous wrap
<frame></frame>
<FRAMESET rows="32px,*"> <-- Initial frameset
</FRAMESET>
</frameset>
</#document>
</iframe>
</div>
By default this iframe element will be 300x150 with border and scrolls (both horizontal and vertical) on. I added some properties:
scrolling="no" - disable scrollings.
frameborder="0" - disable border.
width="100%" (Not style.width, just width).
height="100%"(Not style.height, just height).
Width did fine, it stretched out iframe to full remaining space, but height, for some reason didnt want to work (still was 150px). After some time i understood that this properties position themselves to the parent element. So i added height: calc(100vh - #myHeaderHeight) to the parent <div id='main_frameset'> and everything settled well.
Another issue was to write my previous html into the iframe. You have to access inner document with iframe.contentWindow.document property only by using onload event. This is the way to prevent case when its not fully loaded at the time you try to modify it. Accidentally, iframes' body has default margin, so i recommend reset it 0 too. In my case i fully replaced <body> with <frameset> to prevent further issues like initial.
I hope nobody will ever need to read this answer and wont use anything that is so outdated.

Related

Prevent iframe js from auto scrolling the parent page

We have a page that has a video on it, embedded with an iframe.
The iframe js code for the player has the following code in it:
m.default.focus(function (e) {
var t = e.playButton;
(0, y.focusElement) (t)
})
This basically makes the play button visible on the screen if it isn't already. Which is fine for stand alone videos, but not on a page where we have the video embedded.
What it does framed in on our page is cause the entire page to scroll to that content.
We'd like to prevent that if possible.
Here is the iframe code:
<div class="embed-responsive mb-5 embed-responsive-16by9" id="myFrame" style="height: auto;">
<iframe allowfullscreen="" class="embed-responsive-item" sandbox="allow-scripts allow-downloads-without-user-activation allow-same-origin" src="https://sourcefile.onthesamedomain.com" title="Video"></iframe>
</div>
We've tried the scroll to 0,0 on the parent but that didn't work.
Apologies, but I forgot to add that this is only an issue in Firefox. The other browsers work with the attributes on the iframe.
Any help would be appreciated.
The 3rd party owner of the js within the iframe ended up providing a fix. There was no way we could do this without the screen scrolling back and forth.

Prevent page to jumping to iframe

I'm trying to integrate wetransfer into a website through an iframe, but I'm having a problem when the page loads, it jumps half-way down page, so it focuses on the iframe, instead of opening at the top of the page.
From what I can tell, there is a script on the wetransfer site that's telling it to jump to that section, instead starting at the top of the page. How can I get it to ignore the script by wetransfer or after the iframe's loaded to tell it to move back to the top of the page?
With jquery I tried $('html').scrollTop(0); after initiating the iframe, but it still doesn't work.
On the website I have jquery calculate the height of the user's screen and then set the header to that size, with a full background and navigation and than the iframe starts below that. So setting the position to absolute or anything along those lines, wouldn't work.
I created a very simple jsfiddle example just to show how the page opens scrolled halfway down the page. It only does this when the iframe source is wetransfer and not with any other source.
https://jsfiddle.net/dbruning22/c0s6mhkv/6/
HTML
<header>
Some Header information and navigation
</header>
<div class="main">
<iframe src="https://www.wetransfer.com/" width="100%" height="700" frameborder="0"></iframe>
</div>
CSS
header {
background: green;
height: 600px;
}
This worked for me:
1) You initially hide the iframe by setting the display to none:
<iframe id="bmap" src="xxx.xxxx.xxx" style="display:none;" frameborder="0">
2) Once the page has loaded, then show the iframe using jquery or javascript:
window.onload = function ()
{
$("#bmap").show();
}
This worked for me across browsers
You can put an anchor at the top of your page like this:
HTML
<header>
<a id="focus" href="#focus"></a>
Some Header information and navigation
</header>
On page load use this JS:
document.getElementById("focus").focus();
As none of the above worked for me after numerous tests, another trick, because a lot of sites now have a "scroll to top" button, especially useful if page structure cannot be easily modified (like a wordpress theme ...):
jQuery(".scroll-top-button").trigger("click");
Just forcing a click on that button ... that is really cross browser :-) (if jquery supported of course) ....
This is quite a blunt solution, but you can block all scripts from running in the iframe using the sandbox attribute.
<iframe src="https://example.com" style="width: 100%; height: 250px" sandbox>
NB: An empty value blocks all same-origin resources, including images. You might prefer sandbox="allow-same-origin".

How to remove any div in iframe

Hi Please tell me how can we remove any div in iframe for example my code is :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe src="http://stayupdate.net" width="100%" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
I want to remove "creditline" div or its text
<div id="creditline">
<span class=".alignleft">
</span>Designed By
Real Web Maker
</div>
You can change only if you have access(file) to that page..Otherwise its not possible to change the content of other's page.And it should be.
Don't no about your requirement but..But you can do a trick.
Create a same size div,change the content according to you requirement.
and by js or jquery put it exactly over iframe div.
Is not recommended at all,and its not reliable too.
I suppose you want to add script to your page, which removes a div tag inside the iframe. This is only possible if the page shown by the iframe (http://stayupdate.net) has a provision to do that. If you can modify the inner page, then you could add an event listener, which accepts an external command to remove a tag. The outer page can then send that command using postMessage, as described here. If the outer and inner pages are in the same domain, you can use a simple function call as described here.

How to Apply onmouseover to an Entire Frame?

I have a frame that I want to run the equivalent of an onmouseover event whenever (surprise, surprise) someone mouses over the frame. I know I cannot use onmouseover with the frame or frameset tags. What could I do that would have the same effect as <frame onmouseover=""...?
<frame> s are deprecated in modern versions of html.
You can just do something like:
<div onmouseover="javascript:alert('Hello!');" >
<iframe ...></iframe>
</div>

HTML Frameset issues

I have a main page (test3.html) which has a <frameset> with 2 frames;
Now the top frame is an HTML file always..
But the bottom frame can be a PDF (desktop ver) OR HTML (iPad ver) depending on the condition
I know how to detect iPad or Desktop..So my question is not on how to do that..
For the bottom frame, The HTML (iPad) is just going to have 1 link (but that is dynamic). Is it necessary to call that in a frame? i.e. create a separate bottom_frame.html
I mean is there some way by which it can be coded in the same main page (test3.html) and attached to that page? The reason I am not looking for separate page for bottom frame (iPad HTML) is because it will only have 1 link and that would have to dynamically parsed (and I am getting that info in the main page already..so don't want to create a separate page for that again..)
Below is the URL of the main page;
http://ipad.atwebpages.com/test3.html
Not that I approve of the use of framesets, but you could use a data uri for the lower frame. Something like this:
<!DOCTYPE html>
<html>
<frameset rows="121,*" cols="*">
<frame src="head.html" name="topFrame">
<frame src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+DQo8dGl0bGU+VGVzdCBDYXNlPC90aXRsZT4NCjxkaXY+TG93ZXIgRnJhbWU8L2Rpdj4=" name="bottomFrame">
</frameset>
</html>

Categories

Resources