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>
Related
we have index.html in which second.html is included using iframe,
Now, as we see the iframe border in index.html
Requirement here is we need to write inline script in second.html, so that while rendering second.html in index.html, it'll remove iframe border.
we are not allowed to make any changes in that page where iframe included i.e. index.html
<div class="external">
<iframe src="/folder/second.html" width="100%" height="700"></iframe>
</div>
please suggest me the approach to remove iframe border using the file which is included in html using iframe
Sample Image:
Add this to your code
<iframe src="/folder/second.html" style="border:none;"height:700px;width:100%"><iframe>
Iframe is used to show other content in our web page. You can show videos,images and other web pages in Iframes.
You cannot make any changes in renderer for security reasons.
If that happened....then,
scripts, styles and all parts of both web pages will mix and will change design and functioning of both pages
You cannot change border of iframe from second.html. You should make changes in index.html:
<iframe style="border:0;"></iframe>
However you can make changes in some rendering pages of iframe
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.
Is it possible to execute JavaScript in either a preload script or manually targeting an iframe in a webview /The webview is based on chrome , my intuition says it should be possible.
Basically I would like to click a button inside the iframe using:
document.querySelector('button selector').click();
The page looks something like this. (The page is loaded in the webview)
<html>
<body>
<iframe>
<button id="foo">Click</button>
<iframe>
</body>
</html>
I'm getting started with using iframes and am getting examples done from here. So far I have been able to load the webpage in an iframe. my sample code is as follows:
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.w3schools.com"></iframe>
</body>
</html>
My question is is there a way where I can click on the hyperlinks inside the iframe and that page again loads within the iframe itself without loading as a new page?
I wan't to make a userscript that will persist with its instance even if I click on a link.
To make a script instance (ie. variables etc) persist, I need to have the page I'm broswing in iframe, which is a child of the window where script is running. And also, parents document location must be same as the inner document location - otherwise I'd have problems with same origin policy.
That said, I wan't to turn this:
<html>
<head>
...
</head>
<body>
...page contents...
</body>
</html>
into this:
<html>
<head>
...here is my userscript running...
</head>
<body>
<iframe style="width: 100%; height: 100%">
...move the whole original window here...
</iframe>
</body>
</html>
Unles a link has target="_blank/_parent/_top" all browsing activity should happen in the inner iframe, while the parent window shall not be refreshed (which would cause the script lose all variables).
One way to do that would be simply creating an iframe with same url like the url of my site:
var container = document.createElement("iframe");
container.src = window.location;
However, such approach would cause page reload as well as lose of all data (filled forms, scrolling).
So to move the window with all its contents to an iframe. Is that possible?
Perhaps you could get the contents of document.head.outerHTML and document.body.outerHTML, combine them into a string, base64 encode it, then use the result to construct a dataURL, which you then set as the iframe's src.
Though I could see recursion turning the idea into an effect similar to pointing a video camera at a screen showing it's outut.
Interesting question. Bookmarked.