I have a html structure like:
<div id="bar">
<iframe id="foo"></iframe>
<iframe id="foo2"></iframe>
</div>
Each iframe has javaScript running inside it.
Now: I need to add another element... <iframe id="foo3"></iframe> to the end of the div without foo & foo2 from refreshing. I thought jQueries.append() was the way to do this, but this still refreshes the original iframes (Which resets the javaScript inside the already existing iframes).
Any tips/ideas? Thanks
Below will be the code
document.getElementById("bar").innerHTML += '<iframe id="foo3"></iframe>';
Not sure if it will refresh the other iframes
Related
I have a div that contains the iframe, this iframe loads a URL which shows a page.
Within the iframe, i have a close button which when clicked, hides the div. But I am unable to access the div from within the iframe.
My code as below
<div class="app" id="modalOverlay" style="background-color:rgba(0,0,0,0.5);position:absolute;z-index:1;width:100%;height:100%;top: 0;left: 0;">
<div id="modalContainer" style="position:absolute;z-index:2;margin: -250px 0 0 -250px;top: 50%;left: 50%;background-color: #222;width: 500px;height: 500px;">
<a class="close" style="position:relative;top:-10px;z-index:3">Close</a>
<iframe src="http://www.local.dev/api/v1/track" frameborder="0" style="width:500px;height:500px;position:relative;top:-20px">
</iframe>
</div>
</div>
Within the iframe src view, i load a js which uses jquery
$(document).on('click','.close',function(){
$(document).closest('.app').remove();
});
Anyway to do this?
you can use:
$('#modalContainer', window.parent.document);
second parameter is the context in which to search.
$(document).on('click','.close',function(){
$('.app', window.parent.document).remove();
});
Try something like this:
$('#divtohide', window.parent.document).hide();
Or something like this:
$("#InFrameId").on('click', function() {
$('#divtohide', window.parent.document).hide();
});
EDIT: based on the recent update to your question if the frame is from a different domain, browser will flag this as XSS and you may not be able to do much. One way you can run scripts is if the server of the iframe is configured to send the X-XSS-Protection header with correct value.
This can be done with child to parent frame messaging.
Have the parent frame listen for a message.
<div id="myDiv">
<iframe src="childFrame.html" id="frame1"></iframe>
</div>
<script>
window.onmessage = function(e) {
if(e.data == "close") $("#myDiv").toggle();
}
</script>
The child frame can send a message to the parent frame.
<button onclick="parent.postMessage('close', '*');">Hide</button>
See my gist: https://gist.github.com/sfarthin/9140403
DhruvJoshi's method will have the browser flag this as a XSS attack.
Simply you can't, according to your code, I think your iframe comes from different domain, so a frame from different domain cant access to parent page.
Therefore you may consider using nodejs or maybe, you should read this: Cross domain iframe issue or a search with "crossdomain iframe" keywords will lead you to what you need.
I have the following page layout
<div id="userscore" >test</div>
<iframe name="frameContent" id="frameContent" width="100%" height="100%" frameborder="0" />
The iFrame gets its content dynamically including its javascript.
When I try to access userscore from within the iFrame
console.log(window.parent.document.getElementById('user-score'));
I get in the console
<div id="userscore" >test</div>
When I try to use
window.parent.document.getElementById('user-score').html('Change the content');
I get
Object [object HTMLDivElement] has no method 'html'
Is there a way around this? Or can anybody shed some light as to what is going on.
A DOM-element doesn't have a method .html(). That method is an extension often seen in JavaScript-libraries like jQuery.
When using plain JavaScript you have to set the .innerHTML property if you want to alter the content of the element.
window.parent.document.getElementById('user-score').innerHTML = "New content";
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 have an iframe that looks like this:
<iframe src="http://www.google.com" height=1000 width="500" id="myiframe"></iframe>
I want to create a link so that when I click on it, the iframe on the page changes. How can I do that using jQuery? Is it related to jQuery attr?
You don't need jQuery for that. You don't even need JavaScript for that.
Give your iframe a name, and target your anchors to point to it:
Foo
Bar
Baz
<iframe name="myiframe"></iframe>
This degrades nicely for people who have JavaScript turned off.
on clicking in the link "click here" // it will take move the link to the iframe as specified....
Click Here
<iframe src="blank.html" frameborder="0" name="test" id="test" width=1200 height=800></iframe>