I have a main.php file that contains two iframes: test1 and test2
<iframe id="test1" name="test1" src="test1.php" height="300" width="200"></iframe>
<iframe id="test2" name="test2" src="test2.php"></iframe>
The #test1 contains display: none;
I would like to display the content of test1.php when a button at test2.php is clicked. I have tried a number of options and referred to previous posts related to this issue but couldn't load test1.php. How can I accomplish this?
Edit: I'm unsure about what you mean by "load". Is the content of the other div loaded initially, and you're just trying to change its visibility? Or are you trying to change the whole contents of the iframe?
Case 1:
If you're trying to change the visibility of contents that are already loaded in an iframe when you click the button, then check this question:
Javascript - Get element from within an iFrame
Once you access the element you wish, you can easily modify its display attribute
Case 2:
If you're trying to change the whole contents of the iframe when you click the button, you need to change its src attribute. Check this question for an answer:
Changing iframe src with Javascript
use jquery , when a button on test2 is clicked make test1 display block and test2 display none and vice versa
$('#buttontest2').click(function() {
$('#test1').css('display' : 'block');
})
Related
I have a iFrame inside an php page.
The iFrame contains form (in asp), can I link a button outside the iFrame to the button outside?
Thanks!
you can use a button on main page to click a button on iframe page using jquery.
for example in main page if you have:
Main page HTML Sample:
<button id="parentbutton">click me</button>
<iframe name='select_frame' src='http://www.barzegari.com/DEAFULT.ASP'></iframe>
JQUERY in main page:
$("#parentbutton").click(function(){
$('input:button[name=save]').click(function() {
$('iframe[name=select_frame]').contents().find('#mybuttonid').click();
});
});
in iframe html:
you have a button with id(clientid) like "mybuttonid";
this is prevent by cross domain privacy, but you can do it by this way,
in your php page, use file_get_contents to get asp content, filter get form script and paste to php page, by this way, you can do everything as you want :)
Accessing iframe content from other URL will give you the error Refused to display 'YOUR_URL' in a frame because it set 'X-Frame-Options' to 'sameorigin'. This is because, all the server restricts the access of iframe content from third party website for security purpose. If you are not getting the above error, try the below code in your PHP file.
$("#phpbutton").click(function(){
var iframe = $('#aspiframe').contents();
iframe.find("#aspbutton").click();
});
<iframe id='aspiframe' src='YOUR_ASP_URL'></iframe>
<input type="button" id="phpbutton">click here</button>
Note : Make sure you have replaced with correct IDs.
The questions similar to that I found a lot but still can not realize what I need. I have a page.php that loaded in the block din_content with function .load
Page.php
<div id="ess">
<div id="top_ch">
<h1>Ess</h1>
</div>
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='ess/users.php' id="userch"></iframe>
<iframe name="text" width="450" height="405" src='ess/text.php'></iframe>
</div>
In page I have two Iframes. So I have two problems. First in main page where that iframes loaded I have Jquery function
$(document).on('click','.link_pro',function () {
//some actions
});
How to make that that function also worked in iframe?
Second, In the first Iframe I have two links. So what I need is that depend of what link you click on, the variable 'active' changed and depend on the value of that variable changed the second iframe. In example, you click on the first link and variable 'active' =1 than it transfered to the second iframe (may be even transfer to the parent and try to send to the second iframe trough method Get) where depend of the value displayed a requested result. I try to realize it with jquery and php. But still didn't get the result. The most problem to get a result from clicking on links in the first Iframe.
If you own the iframes sources and they belong to the same domain as the top window, then, for attaching events, you could probably do something like:
jQuery("iframe").load(function(){
jQuery(this).contents().find(".link_pro").on("click", function(){
});
});
The code above will attach the click event to your iframe's content (.link_pro).
Then, for the second question, if you have, for example, in your top window:
var myTopVar; //This belongs to top window scope
From your iframe, you can access:
top.myTopVar;
I think that should be it but, again, both your top window and iframe should share the same domain (document.domain). If not, you will face same origin policy problems.
I have an overlay popup box (DIV + JavaScript + some CSS) which is toggled by a link, like this:
<a href="#" onclick="popup('popUpDiv')">
The box that pops up contains an iframe. Now I want different links on my page to load different iframes when the box opens; so that link A would toggle the box to appear, and load iframe1.html inside the box, while link B would toggle the same box to appear, but load iframe2.html inside the box, and so forth.
I'm a beginning programmer, and I first figured maybe this could be done with PHP, by putting something like this inside the popUpDiv:
<iframe src="http://mysite.com/iframe<?php echo $_GET ["iframeid"] ?>.html">
... and then simply adding ?iframeid=x to each link's href, where x is the id of the iframe to be loaded.
This obviously won't work in practice though, because it requires a page reload, and when the link is clicked, the popUpDiv is toggled to open, but at the same instant, the page reloads, now with the ?iframeid=x query string in place, but too late, since the popUpDiv disappeared on reload.
Is there perhaps a JavaScript equivalent that could be used, or can anybody suggest another way to make this work?
FYI, this is the kind of popup box I'm working with:
http://www.pat-burt.com/csspopup.html
I finally found a really simple way of accomplishing this without additional JavaScripting, by simply using the target attribute:
<iframe name="myfavoriteiframe">
Then:
This is a link.
P.S. Just FYI for any of those out there who might want to use this feature with Vimeo's JavaScript API, as I'm doing: In order to make API buttons work with this target method, it seems like the iframe src-attribute cannot be left blank. You need to specify a link to any of your videos in the src, so that a video loads into the iframe on page load, like this:
<iframe name="myfavoriteiframe" id="player_1" src="http://player.vimeo.com/video/[the_number_of_your_video]?api=1&player_id=player_1">
I simply inserted the URL to the first video on my page, but you can use any of them, since they're hidden anyway.
Then link to any of your videos using the target method described above, and the pre-set iframe video will be replaced by a video of your choice.
Create two divs with the two variations of content (the two iframes with each specific URL). Then toggle by the name of the div.
<a href="#" onclick="popup('popUpDiv1')">
<a href="#" onclick="popup('popUpDiv2')">
Set the id attributes of the div elements appropriately.
Rather than adding something to the popup DIV element, I would add a required link to the href property of the link that you use to open the popup:
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
<a href="http://example.com/first/uri" onclick="pre_popup('popUpDiv')">
And then inside the popup function I would take the href parameter of the link that has triggered the event and use it in a popup:
function pre_popup(id) {
// Take the href parameter of the link
var href = this.href;
// And then use it in the iframe
window.frames["your_iframe"].src = href;
// And then pop it
popup(id);
}
I have a jQuery fancybox with an iframe. It loads the code from a .php.
Inside that .php file, I have a button which does a post when clicked.
$(".next").click(function() {
$.post("update.php", {page: $(this).attr('data-page')}, function(success){
$("#dialog").html(success);
}
);
});
The issue is that when I click this for the first time it loads up the html, however it does not work the second time. It seems that jQuery is not loaded for the second time as I am using the star-rating and the star-rating is not rendered there as well.
Initially my dialog has some html code in it.
To illustrate, here's how the structure of my page. I have a main.php. I have a button inside main.php that when I click launches an iframe fancy box. The content of this fancy box is loaded from a .php file, called content.php. Inside the content.php I have another button that when clicked does a post to loader.php. loader.php echoes a bunch of html. The jQuery code to post is located at content.php When I click on the button inside the iframe for the second time, it doesn't do anything
Well, Fancybox is really just loading a div over your current content, so if the content of that div (the Fancybox "dialog") changes after the DOM is set (in other words, the page is done loading) then the events are not attached to the new content by jQuery. You'd have to modify your code to use the .live() function.
Instead of click, you have to use live. Change first line as:
$(".next").live('click', function() {
I have an iframe on my main page, and this iframe uses php code mostly (src is php file).
At the bottom of this iframe I have this:
window.parent.document.getElementById("qry_str").value='hey';
And in the main (parent) file, I have this hidden input which I am trying to set from the iframe with js:
<input type="hidden" id="qry_str" name="qry_str">
Nothing happens when I try to set the value of this hidden input from inside the iframe.
(Nothing shows up in the src code that is)!
I have also tried setting the hidden inputs 'OnChange' event to an alert, but it won't alert because it isn't changed I guess!
I know it finds the element because I have tried to alert the elementId and it works, the element is found!
Thankful for any help!
If the iframe is on the same domain you want to use window.top to access the parent window.
window.top.document.getElementById("qry_str").value='hey';
View source shows the source code for the page, not a serialization of the current DOM. Use something like Firebug for that.
The onchange event won't fire because the content is being changed from a script, not from the user editing it.
Your tests show you are selecting the element, so that doesn't leave much else to go wrong except how you perform the tests to see if the code is working.