<iframe id="myiframe" src="doc.html">
<button id="btn1"></button><!-- how to get this id? -->
</iframe>
$('#myiframe').on('click', function () {
alert(this.id);
});
I want it to alert "btn1".
No. There is no way to do this for security reasons.
The only way to communicate between an iframe and the current page is if the url in the iframe already contains some javascript and updates the iframe url. The iframe then put some data in the url that the page can retrieve.
If the target of the iframe does not belong to you, this is impossible.
See jQuery cross domain iframe scripting for a complex workaround which could possibly make this work.
This is not recommended though; the best approach would be to rearchitect the document and try to solve a different problem. For example, you could request the remote content via an ajax call and insert it into your document.
For example, using jQuery.load:
$(".target-element").load("doc.html", null, function() {
var id = $(".target-element").find("#btn").attr("id");
});
this.id isn't valid I think, it would also be technically selecting the wrong id(#myIframe)
you'd want something like this.children().attr('id');
Related
I have jquery to load user messages every 1 second but I would like to implement a solution to the messages load to act, similar as a: <iframe>, <object> or <embed> tags
<script>
setInterval(
function()
{
$('#chat').load('load_chat.php');
}, 1000);
</script>
The problem is as it loads every 1 second I can't just use a iframe of the page, I need to keep using jquery, somebody has a solution?
I tried with:
<script>
setInterval(
function()
{
//$('#chat').load('load_chat.php');
$("#frame").attr("src", "load_chat.php");
}, 1000);
</script>
But this is not what I need, it flash the iframe all the time.
I need to make jquery load method looks like a iframe.
but the problem with using iframe is because I need jquery to refresh the frame every 1 second. some body has an idea of how to make <div id="chat"></div> have a scroll bar as iframe ?
First off all I think this is not the correct way to do this.
Read up on streams, because this type of use case is exactly what they where made for.
Then, if you have your load-chat.php loaded in an iframe, you can use the window send message method to trigger a reloadin the page by jquery.
The downside is, that your iframe should also contain a jquery instance.
Check this -> https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
I solved with the following:
$('#chat').css("overflow-y", "scroll");
If someone has a better alternative it would be appreciated.
I have a survey monkey survey, and after I make my selections and click submit I notice that the page url changes. I know that because of same origin policy my original idea to use jQuery to figure out if a submit occurred in the iframe will not work. JSFiddle code below:
jQuery(document).ready(function(){
var title = 'Thank you for completing our survey!';
if($('#surveyMonkeyInfo').contents().find("div.embed_title").val() == title){
window.location.replace("http://stackoverflow.com");
}
setTimeout(arguments.callee, 1000);
})
Then I thought, what if instead I used jQuery to see whether or not the url in the iframe is changed, although I do not get an error in which the underlying cause is SOP related, it simply does not work, nothing happens at all when the url of the iframe changes.
surveyMonkeyInfo.onbeforeunload = function () {
window.location.replace("http://stackoverflow.com");
}
Many apologies for the code smells if there are too many, but how do I get this to work?
If the iframe is the only one in your page.
You can check the current URL with:
window.frames[0].location.href;
But the easy way to see if the iframe loads another url, this should work:
<iframe src="http://www.google.com/" onLoad="alert('Test');"></iframe>
The onLoad would trigger for each url change.
EDIT:
You better test with your own examples, since I cannot give you a working example on fiddle because of the cross-origin problem. If the iframe is in the same domain, you should be able to jQuery the Dom with this:
window.frames[0].$('#surveyMonkeyInfo').contents().find("div.embed_title").val() == 'Thank you for completing our survey!'
Suppose a webpage www.example.com/some.html hosed on server. Now I want to get the content inside body tag of that page from another domain. How can I do it? I tried to find solution, but no luck with that yet.
Here are some ways that I thought and found.
First one can get content of a tag from same site.
$.get("link.html", function(data) {
var html = $('<div>').html(data);
var content = html.find("div#some_div_id").html();
//do something
$("#Container").html(content);
});
use .get() to get html of a div in another page
I tried, but doesn't work for me. I think it's because of my cross domain request.
Second idea is using iframe. Wanna load the page into iframe and extract body tag. But can't find any solution regarding how can I detect the event that iframe completed loading the page? Or how can I get the content from an iframe loaded page?
Can anyone please tell me how can I get those content from the body tag in a simple way?? Is there any solution just like my first example? Please help...
This works.
var bodycontent;
$("<div>").load("link.html body", function (data) {
bodycontent = data;
});
If I was you, though, I would do it using something server-side. This is because many websites use Access-Control-Allow-Origin to block the files, and make you unable to access it. This is also a form of impersonation and hacking, so use it in moderation.
This is not possible without a server-side proxy to request the other site's content; Javascript is not capable of making cross domain requests due to the same origin policy. You can't do this with an iframe or AJAX, server-side proxy only.
try this
$.ajax({
url: "your_url",
data: dataToSubmit,
async: false,
success: function(response) {
$('.your_div').html(response);
}
});
you may also use load
$('body').load("your_url");
$.get("URL", function(data) {
data = data.replace(/\n|\r|\t/gmi,'');
/<body>(.*)<\/body>/i.test(data);
data = RegExp.$1;
});
If you want parse HTML,using regular expressions is better
If I have a website loaded inside an iFrame, like this:
$("#myIframe").attr("src",url);
...is it possible to capture a URL of a new page when a user clicks a link withing that site?
You can attach to the onLoad Event
<iframe src="/test.html" onLoad="alert(this.contentWindow.location);"></iframe>
or
$('#myIframe').load(function() {
alert("the iframe has been loaded, pull the src");
});
Working Sample per Muthu Kumaran:
http://jsfiddle.net/muthkum/DuRTR/
You cannot access the content of an iframe from the page containing it since that would allow you to do alot of evil stuff like steal session cookies, make the user click stuff he didn't want to on another site, etc..
Glennulars answer will apparently work tho. :)
I don't know if events bubble up to the iframe, but you could try:
$("iframe").click(function(e){
console.log('something was clicked');
});
Can anyone help with this please?
I have a webpage with an asp.net frame on it- the frame shows the contents of an html document.
When someone clicks on a link in the html document, I need to show some content in another frame on the same page.
So, the question is, what should 'myTag' be in the following...
e.g.
//this is the contents of my html file`
<p>to be or not to be, <myTag>that</myTag> is the question</p>
Whatever 'myTag' is (maybe a piece of javascript? don't know), it should be able to fire an event on the server so I can send some more text to the other frame on the page
Any ideas?
thanks..
The first thing I would do is give the other frame an ID or some way to easily get to it with javascript. Then inside your iframe, you could do something like:
var other_frame_document = window.parent.document.getElementById('other_frame').contentWindow.document;
// example 1: set the HTML of the other frame from a string.
// this is usually a bad idea because of XSS.
other_frame_document.body.innerHTML = '<b>aloha</b>';
// example 2: better way is to manipulate the DOM in the other iframe
var elm = other_frame_document.createElement('b');
elm.appendChild(other_frame_document.createTextNode('aloha'));
other_frame_document.body.appendChild(elm);
that is one way to fire an action.
Or you can bind the action using jQuery (or some other library) when the DOM loads, like this:
jQuery("#myTagId").bind("click", function() { ... });
This will cause the event to fire when the element is clicked.
You can then use ajax to call the server to update the other frame.