I want to achieve the fallowing goal.I want by the click of a button to get the domain name entered in one input and load it into an iframe. What i have trouble with is after i load the specific site in the iframe how can i get the DOM of the loaded site in the iframe ? I need to save the exact path of an element of my choosing from the newly loaded site in the iframe by clicking on it. Any help would be much appreciated. Thank you.
You can access the <iframe>'s contents via the contentDocument property.
var iFrameContent = $('myIFrame')[0].contentDocument;
$(iFrameContent).find('.mySelector').text();
I should also point out accessing the <iframe>'s contents can only be done if the src of the <iframe> is from the same domain as your script. If the src of the <iframe> is from any other domain, the browser will deny access to the <iframe>contents.
This is a CORS consideration.
UPDATE:
To get around the CORS limitation, you'll have to write a server-side proxy for the URL that is the src of the <iframe> (and it could be pretty simple).
If I were to do something like this in ASP.Net (as an example), I would write a web service that:
takes the actual URL as a String parameter.
Uses the HTTPWebRequest object (or similar) to get the URL contents.
Return it back to the browser.
Then you could set your <iframe> src to "http://mysite.com/getURLService?url=www.lalala.com" and get the contents because the contents are now delivered by "http://mysite.com".
You use .contents()
like $("iframe").contents().find(); etc
Related
I'm trying to run a script inside an AMP page.
There is no page I need to load within the src attribute; my script should inject an <iframe> with the correct src (it is unknown at first load, only received in response to a request made by my script).
Is this possible in AMP?
Disclaimer: I'm open to different approaches to accomplish the same result - injecting an <iframe> with an src attribute within an AMP page.
Thank you
The AMP page cannot contain any javascript in the first place, so this won't work: https://www.ampproject.org/docs/reference/spec.html#html-tags
The only way to achieve your goal is to:
create an iframe with a src attribute pointing to an HTML page you control
in that page load the Javascript that does the work. You can see a similar approach in this example: https://ampbyexample.com/advanced/how_to_create_interactive_amp_pages/
As stated by #ade you can pull this off. Think about it like this.....
You'll have an HTTPS resource that you can hit that will return the blank iframe along with all of the JS code you need to populate the iframe. So basically an entirely functioning page that will be returned to the AMP-IFRAME.
Calling this from the src attribute of an AMP-IFRAME tag will then pull in your page that includes a blank iframe and all of the scripting needed to populate it or manipulate it. So all of your custom code is happening within the AMP-IFRAME tag but all of it's resources live within the embedded iframe tag that the AMP-IFRAME tag pulls in and renders.
We have a custom video player that works very similar to what you are talking about. I created a template that can be hit via HTTPS that returns a page that iframes our video as well as includes all the scripts to play it and manipulate it. It's all contained in a nice neat little package and the only thing required to use the AMP-IFRAME is the script that extends it. Check out all the AMP-FRAME documentation here.
Hope this helps.
Currently we are trying to access the HTML of (with javascript) dynamically generated html-elements (e.g. to get the url of an image). If the html-elements are generated with javascript only - their is no problem. Just extracting the image url with javascript by accessing the DOM elements. But now we have trouble with an iframe.
This is the situation at the moment:
We include external script-file (www.test.com/script.js) to create a gallery on our website
The script.js generates a new iframe in our website (document.write('iframe code here')); referencing to www.test.com/iframe.html)
The iframe.html contains javascript-code again to generate the gallery by creating serveral dom-elements (divs, imgs, a, p,....)
Now we need to read the src-attribute of these images. With the debugging tool of the browser, it is no problem. Without the iframe, it's also no problem. But with the iframe, because of the cross domain policy of the browsers we can not access the html of the iframe.html with javascript.
One possible solution was to try to get the src of the iframe tag with javascript, call a server-side script to get the html content of the src-url and run the content via eval()-function on the client again.
I hope you have other better ways to solve that.
It is not clear from your question, but if the iframe is being served by your app, you can use postMessage in order to communicate between the iframe and its parent window.
I am trying to achieve this:
I am working on a script that checks a Page for iFrames(done), but than it tries to find the VIDEO Tag of HTML5 in it, store its source, than remove the iframe and replace it by a new VIDEO Tag created with the previously retrieved source, the script shall grab the Element from cross domain Sites like YouTube e.g.
So currently I was able to find all iFrames via getElementB
and btw: JavaScript ONLY
It is impossible to do it cross domain because JavaScript has the same origin policy that prevents accessing the content from different domains.
As mentioned within another answer, this is not possible to do in a cross domain setup.
If this is not an issue, you can access the document of the iframe using the following:
var iframeElmnt = documentGetElementsByTagName('iframe')[0];
var iframeDocument = iframeElmnt.contentWindow.document;
var videoElmnts = iframeDocument.documentGetElementsByTagName('video');
You can then hunt through the videoElmnts to figure out which one you should insert into the current page.
I have a page which contains an iFrame into which I display the content of another page, which contains an iFrame; I don't control this page. I would like to get the src attr of the embedded iFrame and display that content within my iFrame. Is this possible with either jquery or javascript?
Just to be clear, here is what I have:
iframe src="somepage.html" id="mypage"
somepage.html looks like this:
iframe src="content.html"
I want to extract content.html from somepage.html and display it within "mypage" before displaying the frame. Is this possible?
If you do not control the other page, and it is not on the same domain as you, browser security restrictions will not let you read the contents of the first iframe on the client (see eg. https://developer.mozilla.org/en/Same_origin_policy_for_JavaScript ). This will make it impossible to read the contents of the second iframe. The only exception is that you may be able to talk from the innermost iframe to the topmost iframe by using window.top, assuming that innermost iframe is on the same domain as the topmost one -- essentially bypassing the 'middle' iframe.
Other than that, you could work around it by requesting the 'middle' frame's html contents using a proxy on the server written in a server-side language of your choice (PHP, Java, Python, Ruby, what-have-you), parsing it for the iframe and then feeding this back to your own application. Depending on what exactly you're doing, this may or may not be a viable option...
I am building a script/application (on client side and on proxy site too) that gathers information about elements from various web-sites.
One last thing that makes me troubles is gathering location of an IFRAME. Let me explain this in more details:
Invariant: Location of IFRAME is not changed via user interaction
Some web-pages uses SRC attribute to define location of new IFRAME - either defined via scripting or manually typed in the source - this is ok (no problem)
Other web-pages uses various techniques how to populate IFRAME dynamically and they do not use SRC attribute of IFRAME - this is ok if location of such IFRAME is inside the same domain, otherwise it is unsafe access to other domain
I will include one example of HTML code:
<html>
<body>
Click here to open an iframe.
<br>
<iframe id="test_iframe" name="test_iframe"></iframe>
</body>
</html>
So if I try by JavaScript this below I will get an empty string.
document.getElementById("test_iframe").src
And if I try to use this below I will get a security error.
document.getElementById("test_iframe").conentDocument.location.href
So my question can be reduced to:
Are there any technique to gather location of such IFRAME which content is outside parent domain and that IFRAME is without SRC attribute?
Thank you very much for your answers :-)
This is called iframejailing. Its not possible to read or alter an iframe element in the page if its pointing to a different domain. Its an inbuilt security feature in browsers.
However, there are certain workarounds for this if the domains in questions can work together to create an iframe proxy (google to get more info), which i feel in this case is not applicable.
Respond back if you have more questions.