In FF we can right-click "Show This Frame Only". So how to do it in javascript/jquery? Becoz i want to remove my webapps banner (which inside another frame of another frameset) but fail.
From what i could understand, you want to remove your web-page's head banner. That is, your page is inside an iframe and you want that it automatically take over the parent page as soon as it loads. To do that, add this javascript code:
top.document.location.href="your_page_link";
Related
I'm trying to use jQuery to modify an element that's "injected" externally. I've tried delegation with on but it didn't work.
Here's the page, scroll down and you'll see an avatar named "Sebastian" with <div class="Avatar">.
If I go right click, Console and type: $('.Avatar'), the element is identified, but this is only because I first clicked on "Inspect element" for that element. jQuery somehow "updated" the source and now it identifies the element.
Now, try to refresh the page and type $('.Avatar') again, jQuery will not identify the element (although it's already loaded on the page).
You can take a look under "A working example" how this script is injected into the page.
My question is, is it possible (and if so, how) to modify this HTML (which seems to be inserted dynamically as the page is loaded)? It doesn't seem to be using any sort of iFrame nor anything, it just dynamically loads into the page, yet jQuery is unable to recognize it (unless you "tell it" to do so by clicking on "Inspect element" on the actual element).
P.S. I've tried using on, delegate, it doesn't work.
jQuery will not identify the element after page because it's in another iframe.
You said "It doesn't seem to be using any sort of iFrame nor anything", but in the end it's iframe.
The reason why you can find it when you go right click on element and then in developers tools you write $('.Avatar') is because once you inspect element (right click) inside developer tool iframe will change.
Furthermore, your parent iframe and iframe that have avatar element have same origin. Run document.domain inside parent and other iframe. Iframe with avatar have origin "app.talkjs.com" and parent iframe have origin"talkjs.com".
Subdomains may be same-origin.
There’s a small exclusion in the “Same Origin” policy.
If windows share the same second-level domain, for instance john.site.com, peter.site.com and site.com (so that their common second-level domain is site.com), they can be treated as coming from the “same origin”.
https://javascript.info/cross-window-communication
You should be able to catch onload iframe event and then search for .avatar.
iframe.onload = function() {
let newDoc = iframe.contentDocument;
console.log(newDoc.getElementsByClassName("avatar");
};
I currently have a page with a few buttons. When I click on the button I want to open a new html page within the parent page. I want to do this in such a way that the parent window becomes transparent and the new page is over it. How can I go about doing this? I have tried to use Iframes but it does not give me the output that I want.
James Kirsch has given you one way to do it. Another is to have a hidden DIV that you show when you need it. In both cases, you may have to place a semi-transparent GIF image behind the DIV (or opened window) so someone can not do anything with the rest of the web page until they have finished interacting with the new window. You can do this by using the z-index CSS command. So the DIV would be:
<DIV style='z-index:100;'>....</DIV>
and the image would be something like
<img src="PUT YOUR PATH HERE" style='position:absolute;top:0%;left:0%;width:100%;height:100%;z-index:50;'>
This would put the GIF image halfway between the web page and the DIV.
The above is what is happening when you go to a website and they grey out everything behind the new window. It also keeps people from pushing on buttons when you don't want them to do so.
IFRAME stands for something like INSERTED_FRAME where the "INSERTED" part means it is inserted into your pre-existing web page. That is why it doesn't work. Neither will the FRAME command work because (again) it is embedded into the pre-existing web page. You are wanting to lay the new window on top of the web page. Thus, Mr. Kirsch' answer and my own. Note that you can also use a TABLE command to do the same thing - even if it is frowned upon to use tables presently. It is the STYLE part of the command that causes the HTML element to appear above the rest of the web page and not any particular HTML command itself. Also, the "position:absolute" part of the STYLE command is what overrides the web page's positioning of the element. Have fun!
In the Javascript have you considered using the following?
window.open();
This call appears to take parameters for Position and Size, you may be able to close the previous window also if you desire, or manipulate it.
Example:
window.open('this.html','','left=15,top=15,width=800,height=600');
Reference: here
I think I know the answer already is probably "No", but I'll ask anyway, (as there may be a work around like a "lightbox" option etc)
I wrote a banner exchange script, with a difference. When the banner is clicked, a new window opens appears inviting the user to subscribe to a newsletter first, (or go straight to site)
This works fine if I use a window.open() prompt, as effectively the text for the popup is pulled in from URL of the window ... but I want to use a (modal?) window without the location bar etc. But here's the problem: The script runs on siteA, and displays the banners on HTML page of siteB. When you click the banner, it cannot access the javascript/CSS modal window code on the host HTML page. I think even with a light box div, the image or link has to be "hard coded" into the HTML page first. Can anyone envisage a work-around?
Here is what I've tried thus far (in simplified form):
<script>
hide id 0
</script>
<div>
<object data=pop-up text pulled from Site A: visibility:hidden id=0 width="720" height="600">
</div>
<object data=banner code pulled from SiteA width="490" height="90">
(I tried running the javascript from site A, and calling the hide routine via parent.document... to get to the javascript hide routine within the HTML page. Adding an alert to this 'calling' javascript, I get "SiteA says: hallo" when I click the banner)
I also tried jumping the banner to a script that would redraw the code to "_top" of the browser, and display the pop-up code in a div on this new page. I tried window.history.back to get the HTML from the page we've just left ... but all that does is reload the same page and discard the new code
I made the second object code above 'almost' same size as banner so text above and below if on HTML page flows properly.
On a slight tangent, it there a way to print a "block" of code in Javasript. In PERL, you can use "print <<EOF", but at present, if I want to print a large amount of text via javascript, I'm using +'xxxx xxx xxx xx' +'xxx xxx xxx' and escaping each and every single quote and newline. Is there a better way to print a line of code that contains numerous newline feeds?
My requirement is to show 3 third party pages using iFrames. I need to show these 3 third party pages, 1st one on click of image, 2nd one on click of anchor where these two are present in the content page holder body portion and 3rd one on the click of anchor in Header party of the page which is in master.
Right now, i'm using 3 iFrames for each one of them.
My Problem is when still one iFrame is open, I'm able to click on the other iFrames which should not be ideally. I mean if one frame is open, the parent page should not be accessible to the user until he finishes save or close the iFrame. Even i tried jQuery blockUI, but the loading message is appearing on the iFrame which is unpleasant for the user to access the iFrame.
1) I need clarification how to achieve the functionality, only the iFrame which is opened at present is accessible and make the parent page unaccessible until user completes his action on the iFrame opened currently. Blocking the parent page till user finishes his job with opened iFrame.
parent.window.$.blockUI(); //but it is making the iFrame visibility hided by the msg
Please provide me some feasible solution to achieve the above functionality.
2) can i use single iFrame and dynamically change the src attribute using javascript? or maintain separate iFrames individually to avoid dilemma in using frame ID's.
Please advice me, i achieved all the functionality with frame except these two things. If these are achieved then the functionality will be perfect without any hassles for the user to access the UI.
jQuery dialog option modal=true solved my first problem. As of now i kept individual frames for the 2nd one..
I have some pages with iframes in them. I want to add a link/button inside the iframe, to make the browser go back one page in history. But I want the PARENT to go back, not the iframe itself.
I originally had this, which makes the iframe page go back (if it exists):
« Go back
I've tried window.parent.history.back() and window.parent.document.history.back() but neither one works. There are no cross-domain issues accessing the iframe from the parent and vice-versa.
I've done some toying around to try and answer this question - at least in IE8.
Navigation within the iframe appears to impact the parent's history. I tested this by adding code within the parent page and within the linked child pages that uses alert to show the value of history.length. Navigating to a new window within the iframe causes history.length to increment on the parent page and on the child page.
The only way I can think to control the back behavior as you desire would be to use history.go(XXX) where XXX is a hard-coded number or is derived by keeping track of the number of page loads since they loaded the iframe.
My personal suggestion would be to explore an alternative to iframe if you can - this approach has a bit of a code smell to it. :)
You can use this:
back
or:
back
It's work for me!
;)