I was wondering, I have a div in a htm page(1) that open and display another htm file(2). And I have areas on this page(2). When I click on those areas, it open another page in the div.
I was wondering if there is a way in native JS using a MutationObserver to observe this kind of modification and do something everytime it happen?
I Work on IE11 exclusively.
Page 1 :
<div id="one">
<iframe src="index.htm" style="width:100%; height:100%;" alt="" id="fram"> </iframe>
</div>
Index.htm
<img src="../assets/SM2.png" usemap="#Tr" id="draggable" class="dragme" onload="initiate()">
<map name="Tr" style="z-index=1;" id="mapping">
<area title="2" shape="circle" coords="6426,4171,8" href="2/Tr.xml">
...
And the thing would occur when I click on the area in Index.htm.
I couldn't find the solution on internet since this is a very particular question /:
Thanks in advance!
Have a nice evening!
EDIT 1: Is it possible do it in some awful way such as using "OnPropertyChange" and when I click on the area, I call a function that change some properties in my page? :/
Alright, I'll post this as an answer then:
You can simply listen for the load event on your iframe, as it should be fired each time a (new) pages has finished loading:
document.getElementById('fram').addEventListener('load', function()
{
/* this is called on the iframe's first load,
and every time it has finished loading a new page */
});
Related
Ok, thank you first of all his attention. I have three iframes in 3 different html documents. Organized in this way:
In iframemain.html I have:
<iframe src="iframeparent.html" width="100%" height="600">
</iframe>
In iframeparent.html I have:
<iframe src="iframeson.html" width="90%" height="350" name="_parent">
</iframe>
In iframeson.html I have:
<iframe src="http://anywebsite.com/samplepage.html" width="80%" height="300">
</iframe>
I did this because http://anywebsite.com/samplepage.html links are loaded into main window (iframemain.html), and not what I want, I wish I could capture the target and load the content iframeparent.html without afect to iframemain.html
I clarify that I have no control over the content of: http://anywebsite.com/samplepage.html, but it is annoying that your links loaded into the main window, so I would like all of those links are loaded in the same iframe or much in the iframeparent.html
Is this possible with Javascript or Jquery?. Thanks for your answers.
See if I have understood this correctly
You want to frame a page http://anywebsite.com/samplepage.html on iframemain.
That page has a bunch of links with target="_parent" or worse, "_top"
You want the page you have framed to not target iframemain but to have all links stay in that frame.
If the links target _parent, then your solution is correct. If they target _top, you would need to use a proxy on the server. It would break if they change the way they target links (using javascript or base target for example) but the idea is that you have
<iframe src="yourproxy.php?url=http://anywebsite.com/samplepage.html" width="80%" height="300"></iframe>
and in there, replace all _top and/or _parent with _self
But show some examples of the links (you can change the URL to protect your client) so we can help better
I have the following code on a page on my site — when the user clicks on the image a sound plays:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
}
</script>
<span id="dummy"></span>
<div id="soundimage">
<img src="image.png" />
</div>
It all works great, but the image is at the bottom of the page, and when the user clicks the image they are redirected back to the top of the page. Is there any way to get this working so that there is only an audio change, and not a visual one (if that makes sense!)?
When using a mouseover function instead, such as
<a onmouseover="playSound('sound.mp3');"><img src="image.png" /></a>
the user remains where they were on the page, but I would like them to have the option of playing the sound on click and not on rollover.
The problem is your href attribute. # as an anchor sends it to the top of the page. Use
...
Also, always include an href attribute to links.
You can (and I think is more correct in cases where Javascript support is limited), to use a link like:
...
instead of Grexis one, because if the browser you're using doesn't support Js, then the "onclick" event will never be fired and thus Js won't be read. It won't be a problem, probably, but still you should consider using better coding techniques.
instead of having the onclick event in an a tag, get rid of it and put it on the img tag. if you like the cursor for links, you can change the style too.
Example code has been indented so it actually shows in the post.
<img src="image.png" style="cursor:pointer;" onclick="playSound ('sound.mp3')" />
I am new to learning js and having a problem with the following:
I have a custom block on my page that looks like this...
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
And a function in my script.js file that looks like this...
jQuery(function() {
jQuery(".toggleup").click(function(){
jQuery("#chat").slideToggle("slow");
jQuery(this).toggleClass("toggledown");return false;
});
});
The issue at hand is that client.php returns 2 variations of a page, both of which contain close buttons that execute:
javascript:window.close();
Which I have changed to:
javascript:window.parent.jQuery('.toggleup').click()
When the JavaScript is executed, the chatbox slides closed as it should, but then all I see is:
[object Object]
where my Iframe content should be.
What am I doing wrong?
I don't really get what you are trying to do :).
All I can say for now is that using inline tags for scripts is not a good idea, try to enhance the page from inside the script.js. Are you trying to fire the click on the .toggleup with .click()? This won't work since the .click() function registers a handler for the selected object(s) - in this case you are adding an undefined handler as there are no arguments supplied. If you want to trigger the event on the element use .trigger('click'); instead. The [object Object] thingy is the string representation of an object so I think somehow you assign a stringified object to the iframes src.
Thats all I can say for now, if you specify a little more what you want to do I will try to help you :)
The problem was that I had these two elements in my custom block and both needed to be executed for everything to work.
<div id="chat">
<iframe src="/sites/all/libraries/webim/client.php?locale=en"
height="100%" width="100%">
</iframe>
</div>
<div class="slider">
<a class="toggleup" href="#">Live Support</a>
</div>
However when calling the jQuery function like this...
javascript:window.parent.jQuery('.toggleup').click()
instead of clicking the link, the box would close as expected but the div and iframe are never created.
Instead I changed the following line in my custom block from...
<a class="toggleup" href="#">Live Support</a>
to...
<a class="toggleup" href="#" id="chatbtn">Live Support</a>
and called it using
parent.document.getElementById('chatbtn').click();
instead of the previous jQuery code therefore executing everything in my custom block and not just the jQuery for closing the slide.
Hope it helps someone.
:
First just let me say I'm open to ideas on a different approach altogether.
I have and iframe as such:
<div id="testloadlogin">
<iframe src="../security/login.aspx" width="400" height="500"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
The page being loaded with the iframe has a div called loginInnerBox. I only want to display the loginInnerBox and everything inside of it.
Any ideas on how to do this? I was thinking of using Jquery or javascript of some kind to remove everything else on the page loaded by the iframe, not sure how to access that though...
Just to be clear I want everything on my page outside of the iframe to remain intact. I want the equivalent of saying $.('testloadlogin').load('../security/login.aspx' #loginInnerBox) which would just get loginInnerBox's html and place it in the testloadlogin div. However I need the back-end processing from the other page which is supported by iframe, but not by the Jquery load.
The markup of the page loaded by the iframe is
<body>
<div>
</div>.......
<div class="AspNet-Login" id="ctl00_CLPMainContent_Login1">
<div id="loginInnerBox">
<div id="loginCreds">
<table>
</table>
</div>
</div>
</div>
<div>
</div>....
</body>
Do you need more information than that?
I tried this, it had no effect:
<div class="ui-corner-all" id="RefRes">
<div id="testloadlogin">
<iframe onload="javascript:loadlogin()" id="loginiframe" src="../security/login.aspx"
scrolling="auto" frameborder="1">
[Your user agent does not support frames or is currently configured
not to display frames. However, you may visit
the related document.]
</iframe>
</div>
</div>
<script type="text/javascript">
function loadlogin() {
$('<body>*', this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();
}
</script>
With jQuery, you can load not just the contents of a URL, but a specific CSS selector from within that URL. This would be a much cleaner approach. It's like this.
$("#area").load("something.html #content");
Via CSS Tricks
$("iframe").contents().find("*:not(#loginInnerBox)").remove();
Be aware this would only work on iframes loaded from the same domain (same origin policy)
EDIT: Probably this removes children of loginInnerBox as well. In that case you could try to clone it before:
var iframe = $("iframe").contents(),
loginBox = iframe.find("#loginInnerBox").clone();
iframe.find("*").remove();
iframe.append(loginBox);
Something like that..
Add this to the <iframe>-elememt:
onload="$('body>*',this.contentWindow.document).not('#ctl00_CLPMainContent_Login1').hide();"
it will hide every child of the body except #ctl00_CLPMainContent_Login1
If #ctl00_CLPMainContent_Login1 contains more than the loginbox, you have to use the suggestion using clone() posted by pex.
I'm trying to figure out just how a particular function works on a Facebook page, and being no friend of JS syntax, am having trouble. Here's the question mark bit:
<a href="#" clicktoshowdialog="my_dialog" onclick="
(new Image()).src = '/ajax/ct.php?app_id=4949752878&action_type=3&post_form_id=3b933f46f9c4c44981e51b90c754bfce&position=2&' + Math.random();
FBML.clickToShowDialog("app4949752878_my_dialog");
return false;">
<img src="linktopicture" title="Are your friends fans?" width="190" height="230" />
</a>
<div style="display:none">
<div id="app4949752878_my_dialog" fbcontext="aa3fcff8e653">
<div class="app_content_4949752878" style="padding:10px">
<div with hidden then exposed content...
The functionality of this is an image that, when clicked, pops out the previously hidden div. I know that the app###### is prepended to all JS used in Facebook to limit its scope. I'm confused by the anchor parameter of
clicktoshowdialog="mydialog"
What is that identifying, and how is it targeting the div that's exposed when the image is clicked? Thanks for any clarification, and let me know if I can post any more sample code.
According to the wiki it's just for opening the dialog (which is defined at the bottom). Facebook generates the JS to open the dialog. The attribute got post-processed and the JS code (that you see in the onclick= attribute) was generated on it's basis.