How to get the frameset from a frame window? - javascript

Consider the following code:
function hide(aFrame) {
var frameset = aFrame.frameset; //<-- this doesn't work
$(frameset).attr('cols', '0,*');
}
//hide parent frame
hide(window.parent);
//hide current frame
hide(window);
I have a function that takes a frame and I would like to hide it by changing the cols of its frameset. jQuery may be used to answer the question (but a pure JavaScript solution is okay as well).

The trick seems to be querying the parent document:
function hide(aFrame) {
var frameset = aFrame.parent.document.getElementsByTagName('frameset');
$(frameset).attr('cols', '0,*');
}

Related

How to enforce user must scroll pdf within iframe

I have a pdf file within iframe. I want user to scroll must in pdf file before submitting the form. i am trying with this,
var position = $('#myIframe').contents().scrollTop();
But not working. Please help me Thanks in advance.
If you don't mind making a static height for your iframe, I have a solution for you.
HTML and CSS
1. Wrap your iframe in a div container
2. set heights for both your container and iframe (height of container should be the height you want your frame to be seen and the iframe height should be large enough to show entire pdf.)
3. set container div's overflow to scroll
Now you have a scrollable "iframe".
Javscript
Get container element. (var containerEl = $("#container")[0];)
Write a scroll function. Within the scroll function find if the total height of the element (scrollHeight) is less than or equal to how much has been scrolled (scrollTop) plus the inner height (clientHeight) of the
element. If it is, remove disabled property from button
Here's the fiddle. Made some changes to #mJunaidSalaat's jsfiddle.
Well I've tried almost an hour on this, Researched it, finally coming to a conclusion that Unfortunately this is not possible using this method.
The PDF is usually not a DOM element, it's rendered by PDF reader software. Every browser has its own mechanism for rendering PDFs, there is no standard. In some cases, the PDF might be rendered by PDF.js; in those situations you might be able to detect scrolling. But Adobe Reader, Foxit, and some of the native PDF rendering don't provide that option.
I've also created a Github issue for this. But no use.
Sorry. Please update me if you could find any thing or any workaround.
I've made a Fiddle for your solution. You can disable the submit button for user until user scroll on your iframe.
function getFrameTargetElement(objI) {
var objFrame = objI.contentWindow;
if (window.pageYOffset == undefined) {
objFrame = (objFrame.document.documentElement) ? objFrame.document.documentElement : objFrame = document.body;
}
return objFrame;
}
$("#myIframe").ready(function() {
var frame = getFrameTargetElement(document.getElementById("myIframe"));
frame.onscroll = function(e) {
$('.submitBtn').prop('disabled', false);
}
});
Hope it helps.
try this
$("#myIframe").ready(function() {
var frame = getFrameTargetElement(document.getElementById("myIframe"));
frame.onscroll = function(e) {
$('.submitBtn').prop('disabled', false);
}
});

What's this Javascript condition checking?

An ad provider wants us to add some Javascript to our site that'll allow them to resize the iframe their ad is served into. I've been going through the code, and part of it is this loop:
var topIframes = top.document.getElementsByTagName('IFRAME');
for (var i = 0; i < topIframes.length; i++) {
if (topIframes[i].contentWindow === self) {
// found iframe that served the ad
topIframes[i].style.height = sz + 'px';
}
}
I can see it's grabbing all the iframes in the document and adjusting the height of one or more of them. But I can't figure out what the condition's doing.
I know contentWindow's the window inside an iframe, and looking at What's the difference between self and window? I see that "self" is a reference to the window object. But which window object? The parent window or the window inside the iframe? Is there even a window inside the iframe? Why check that the window inside an iframe is the window inside an iframe?
////////////////////////////////////////////
EDIT
At Snuffleapagus's request, here's the long version:
<script type="text/javascript">
// iframe shrink function that needs to be on the hosting page
rp_resize = function (sz) {
try {
var topIframes = top.document.getElementsByTagName('IFRAME');
for (var i = 0; i < topIframes.length; i++) {
if (topIframes[i].contentWindow === self) {
// found iframe that served the ad
topIframes[i].style.height = sz + 'px';
}
}
} catch (e) {
}
}
</script>
<script>
// this is the code that goes in the passback to initiate the function
try {
if (typeof(rp_mpu) === 'function') {
rp_resize(250);
}
} catch (e) {
}
</script>
<script language="JavaScript" type="text/javascript">
rp_account = '<account-id>';
rp_site = '<site-id>';
rp_zonesize = '<zone-id>-<size-id>';
rp_adtype = 'js';
rp_smartfile = 'http://<url>/..../revv_smart_file.html'; // this should be the URL path to the friendly iframe that needs resizing
</script>
<script type="text/javascript" src="http://ads.<url>.com/ad/<account-id>.js"></script>
////////////////////////////////////////////
EDIT
Here's a possible clue from the ad provider in answer to my question about the condition. Don't know how much use it is, as he's not a developer.
"The line of code you are looking at is trying to determine if it is the iFrame from which the function has been initiated so it can be resized accordingly."
From what I understand working with Javascript and how it can access iFrames, the provider is assuming that you have multiple iFrames on the page. Also, it assumes that the iFrame they are looking for does not have an ID to reference easily.
Based on this, after the frame with the ad content loads, at some point it will call rp_resize(250);. However, the function rp_resize does not know which of the iFrames on the page it was called from. The script loops through all the iFrames on the page until it finds the one that called the function. This is how it knows which frame to call.
Hopefully that makes sense and / or answers your question.
I think, self refers to the parent window. To check, type the following in your browser console and see the result :
self == window
.contentWindow will return null if the iframe hasn't completely loaded. It looks like the code is looping through iframes, checking if they are loaded, and if so, resizing them.
Edit: musefan is right; I worded it incorrectly.
Edit 2: Why check that the window inside an iframe is the window inside an iframe? It's null if it's not loaded yet; if it is loaded, it's a window.

Checking if window size has changes and performance/optimalization

today I'm implementing slider plugin and I have one question about it:
I want to make it responsive, but to achive that (depending on my current implementation) I should add another function which will detect if browser window size has changed - and here's my question - is it good for overall performance? Or maybe I should re-think about my solution and try to build it with pure css?
The browser resize is only temporary and personally I don't see the big hassle for a slight hiccup in that phase.
Since you refer to jquery, you can just add
$(window).resize(function() { ... });
Add it withing the document ready, and you will do good to call it one on load. Just do
$(window).resize();
As far as performance, you are correct that every little addon will have effect on the performance, but only when it is active. When the window is not resized, teh event does not get fired.
<div id="resized"></div>
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
$(window).on("resize", display);
or using javascript
function display() {
var p = document.createElement("p");
p.textContent = "resize event";
document.getElementById("resized").appendChild(p);
}
window.addEventListener("resize", display, false);
on jsfiddle

Removing iframe from page

I am creating an iframe dynamically for submmiting a form,after submitting i need to remove the iframe form the page.I removed itas follows but it is not removed,
function remove(){
var frame = document.getElementById("upload_iframe"),
var frameDoc = frame.contentDocument || frame.contentWindow.document;
frameDoc.removeChild(frameDoc.documentElement);
}
How to remove the ifarme form the form completely.
Thanks
Frame has 2 behaviors: frame as document element (like div or another DOM element) and frame as window element (like global window object). So if you want to remove iframe from DOM tree you have to work with iframe like with DOM element
function remove(){
var frame = document.getElementById("upload_iframe");
frame.parentNode.removeChild(frame);
}
A way I've been doing it (since I have a large amount of iframes) is using jQuery,
$('iframe').remove()
or in the case of only one iframe you can remove it using its ID, still with jQuery
$('#iframeID').remove()

Accessing certain value from iframe and using it in parent page Javascript

Inside my iframe i have a dial that spits out angle when the needle moves. Instead of getting both dial and needle both inside frame, is it possible to show the angle value somewhere else in my parent page outside the iframe. This is the code i have.
function showIframeContent(id) {
var iframe = document.getElementById(id);
try {
var doc = (iframe.contentDocument)? window.frames[clkwise1].document.getElementId("demo").value;
alert(doc.body.innerHTML);
}
catch(e) {
alert(e.message);
}
return false;
}
The standard and cross-browser way to access the content of an iframe is:
iframe.contentWindow.document
I would expect this to work in your case:
document.getElementById("clkwise1").contentWindow.document.getElementById("demo").value
(I'd need to see the page itself to confirm it - for example I assume "demo" is an input element. Also, note your typo in getElementById)
Live demo: http://jsfiddle.net/ZWC6v/

Categories