We Keep Coding

How to use `arrive.js` to find an element arrived inside of a `iFrame'

I require to find the DOM element which is adding inside of a iframe, with the iframe added. for determine to find the element added, I am using this plugin
all i doing from chrome ext.
arrive.js
body>iframe1>iframe.ssueContentIframe2>#SmartReportTabContent1>loopElements>link
like this:
document.arrive(".ssueContentIframe", function() {
console.log('.ssueContentIframe arrived', this);//works
this.arrive('#SmartReportTabContent1', function(){
console.log('arrive 2');//not working
});
});
what is wrong here? any one help me please?

To check for an element within an iframe you need to include the arrive.js library and your script that calls the arrive() function within the iframe.

If you just want to detect whether iframe is loaded there's other solutions, but if you want to muck around in the iframe you have to keep in mind cross-domain policies.
Javascript has a Same-Origin policy in which javascript on the outer page cannot access the contentWindow or DOM (or global state) of the iframe page if it does not share the Same-Origin
-- T. Stone
Seems to me arrive.js isn't the problem, it's trying to mess with an iframe.

javascript in iframe document.write overwrites parents document

I want to load HTML as string into an iframe via Javascript.
like this:
$('#iframe1').contents().find('html').html("<h1>This is an iframe</h1>");
this worked great until I found out, that inside this HTML upcomming Javascript like document.write are writing to the wrong document -> the parent!
Here is a Plunker to show it:
http://plnkr.co/edit/YQAqqSDCVKnP3uhLj4lF?p=preview
if I load the same HTML to the iframe via src as external document, the document.write goes to the iframe (and not to the parent), which is what i was expecting.
Are there some insights out there?
How can I tell the browser to correctly create the iframes document scope before it executes its Javascript?
PS: Its meant to be for preview purposes, so i inject HTML-Code of a (trusted!) source, but within that code, document.write is allowed.

Ok. srcdoc is helpfull here.
$('#iframe1').attr({srcdoc:intrusiveHTML});
I updated the Plunker.
With srcdoc, Javascript won't slip up with the document scope.
It won't work in IE (http://caniuse.com/#feat=iframe-srcdoc), so it might help to use Polyfill additionally:
https://github.com/jugglinmike/srcdoc-polyfill
But I did not test that yet.

Instead of using document.write, use document.getElementById('iframe1').contentWindow.document.write.
Because when you point document it will take main window document, so we need to indicate which iframe doument need to be used.

recognizing actions on an iframe

So I have an iframe, and I would like to be able to do something like an alert whenever a specific button in the iframe is clicked. But the following code does not work
$('.class_name').click(function(){
alert('Clicked');
});
in fact, it wont even alert when the iframe is clicked (which is the same code as above, but where .class_name becomes iframe).
I looked at the solution from this question, and it still did not work!
This is a jsfiddle that should demonstrate the issue pretty well.
So my question is: Why wont Jquery recognize when anything inside the iframe, as well as the actual iframe, is clicked?
Edit:
I understand that I cannot communicate with an iframe on a different domain, so my jsfiddle wont work...but it doesn't work on the site where I am hosting it on the same domain as the iframe...

If your iframe is coming from a different domain, as in your fiddle, then your JavaScript code has no access to its contents at all, sorry!
As #Max poins out, you can use postMessage() or the URL fragment hack to communicate with an iframe in a different domain, if there is code in that iframe to handle this communication from that side.
With an iframe from tumblr.com, you could check their documentation to see if it talks about using this page in an iframe and communicating with it across the domain barrier.
Now if you're talking about an iframe from the same domain as your page, then it's easy. Given an iframe element in a variable named myframe, you can use myframe.contentWindow to get its window object and myframe.contentWindow.document to get its document object. From there you can do the things you need. For example:
var $myframe = $('#myframe'),
myframe = $myframe[0],
myframewin = myframe.contentWindow,
myframedoc = myframewin.document;
$(myframedoc).find('a').on( 'click', function() {
alert( 'Clicked!' );
});
You may still have some trouble using a copy of jQuery in the main page to access things in the iframe, but should have better luck with the latest versions. Worst case you can use native DOM events and methods for this, but jQuery does work in this updated fiddle.
This fiddle uses document.write to put content in the iframe, but the jQuery code accessing the frame would be the same either way. The one thing to watch out for, of course, is whether the iframe has been completely loaded when you try to access it.
I think you can listen for a load event on the iframe element in the containing page, but worst case you could use setTimeout() or setInterval() and wait for the elements you're looking for to become available.

Because the iFrame is a completely different frame- it's done out of security concerns. For example, imagine if you could load a banks login page in an iFrame, and use js to get the field values.
With different domains especially, it is much harder to communicate with JS- this should get you started: How to communicate between iframe and the parent site?

Accessing js frameset function from child frame

I've got a javascript include that's declared in the head of the frameset of a site, this js file has a number of methods in it. I need to call the method from one of the framesets child frames but can't quite figure it out, could someone help me out? Here's my call that's not working:
launch lightbox
Unfortunately the js needs to be added to the frameset as the lightbox needs to fill the whole screen and not just in the dimensions of the child frame where the above code sits.
Thanks,
Colin.

I think you can access it with window.top (coming from my memory though)

Getting a reference to a nested frame object doesn't work everytime in IE8. It works when adding an alert()!

I have an odd problem with IE8. I am trying to get a reference to a frame (same domain) object. The frame resides inside an iframe. The iframe resides deep inside multi level div's. The whole html is an output from an ASP.NET server control. jQuery code to get the reference is jQuery(top.window.frames['the_iFrame'][1].document).contents()[0]. The code resides in a jQuery ready() function. (The iframe id is generated dynamically and there's code to get the id).
This works everytime in Firefox. However in IE8 sometimes the object is empty. BUT if I place a dummy alert() just before the above jQuery code, it works everytime in IE8. I don't know why but my guess it has to do with suspended code execution? An alert() won't cut it so I tried to get the reference in a loop which contains a delay thinking maybe it needs some time but that didn't help.
Questions: Why placing an alert makes the code work in IE? Is there a way to fake the alert's good side effect with something non visual? Why isn't it working reliably in IE?

You're probably trying to access the <iframe> contents before it's loaded and ready. Your outer-level "ready" handler will not wait for the nested <iframe> to load.
A couple of options:
Probably the most reliable thing to do, if you can manage it, is to flip around the responsibilities. Have the page inside the frame push information up to the parent page from its own "ready" handler.
If you can't affect changes to the page in the <iframe>, then you could poll until it's ready
function waitForFrame(whenReady) {
function doWait() {
var obj = jQuery(top.window.frames['the_iFrame'][1].document).contents()[0];
if (obj)
whenReady(obj);
else
setTimeout(doWait, 100);
}
setTimeout(doWait, 100);
}