trying to access data which is inside a specific iframe - javascript

im trying to access data which is inside an iframe. There are multiple iframes on the web pages without ID tag, source of the iframe is given in html format , no external link given.
so can i switch to a particular iframe and access data inside it ??
i tried using
var ifrm = document.getElementsByTagName('iframe')[1];
var $iFrameContents = $('ifrm').contents();
$entryContent = $iFrameContents.find('div.entry-content');
but this code is NOT working. i have attached a screenshot of my coding , can anyone help me in writing a javascript/jquery to get the data in Tag inside an iframe with index 1 .
screenshot of coding

iframe.contentWindow is its internal window, and iframe.contentWindow.document is its internal document object.
But bear in mind that iframes are subject to cross-origin rules, and you won't even be able to read the URL of the iframe if it's on a different origin. You can start with a link to same-origin, but the user could navigate it elsewhere.
window.postMessage can be used to communicate between windows on different origins, if you have control of both.

Related

JavaScript: Read URL of parent page

I have a page that is loaded inside. The application including this page is located on another domain. So the domain of my page and the application rendering it inside an iframe are located on different domains. The page inside iframe reads the URL it is loaded from to store in the database. The page loading has a hash in the URL.It is like:
https://www.somedomain.com/organizers/list/#type=current&sort=bydate
I am reading the URL from mypage. It is located on:
https://www.someotherdomain.com/organizers/#sample
var _url = document.referrer
The above code gives me the URL but only till "https://www.somedomain.com/organizers/list/", "#type=current&sort=bydate" is missing. I need that else this code is of no use to me. Is there a way I can read the complete URL without missing any segment?
like this
var _url = window.location;
This is by design. The browser will give you the referrer which is the URL where the user came from, however the #hashmark is technically (by its original design) a sub-navigation concept within a page, thus not passed on to the next page load.
If you were on the same domain as the parent page, you could access it via the
window.parent.location.hash
however since you are from a different domain this access will likely be blocked for security reasons.

Can I create a new web page from the HTML in a div using javascript?

I have a web page that allows a user to choose some options for a widget and then dynamically generates example HTML based on those options. The HTML is put in a div on the page so that the user can see how it looks and copy/paste it to their own site, if they so desire.
I would like to add a "view this example page" link, which opens in a new window and has the example HTML from the div, so that the example can instantly be seen in action.
Is there a way to do this with javascript/jquery?
You can actually use the window.open method, saving a reference to the opened window, and then writing to it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/open
var exampleWin = window.open("", "example");
var docMarkup = "<!doctype html><html><head><title>test</title></head>" +
"<body><p>Hello, world.</p></body></html>";
exampleWin.document.write(docMarkup);
// later you can also do exampleWin.close() if you wish
Try pasting the above code in your browser's developer tools console.
The usual way to accomplish the end goal works a bit differently. You have a web server listening for GET requests at /code (or similar) and it constructs and responds with the appropriate HTML based on the query string. So you can request /code?color=blue, for example.
Constructing documents is what web servers are designed to do. This approach allows you to leverage caching policies, integrate with a wider variety of user authentication and authorization systems, etc.
To display the source code to the user, simply fetch() the appropriate URL and put the contents in a <code> tag. To display the rendered widget, use an <iframe> whose src is the same URL.
If you really want it to be a new window, open() the URL instead of using an iframe. But beware of popup blockers.

Is possible to read script tag src URL content using JavaScript/jQuery

Please guide me. Is possible to read script tag src URL content using JavaScript/jQuery. Please don't suggest JSON/Ajax/iframe options.
I have tried like
<script src="http://www.test.com" id="test">
document.getElementById('test').src
but it give only src URL.
My Exact requirements is,
I have two application, each in different web server with www.siteA.com and www.siteB.com.
In Server2, I have cross origin and iframe restriction to access the application. Example: If a request is coming from server1(siteA) to server2(siteB) via Ajax or iframe, it's restricted to access the siteB page content. But If I load siteB in script tag it's loaded, but I'm not able to get the content.
So I mentioned above, don't suggest iframe and Ajax. Help me to achieve this.
The best way really is AJAX, but it does sound like CORS is an issue for you. The only other option I can think of would be to open the page in a new browser window, although I don't know what kind of user experience implications that will have on your application.
You can open a new browser window by:
function showContent(){
var url = document.getElementById("test").src;
window.open(url, "_blank");
}
Although if you take this route, you shouldn't put the url on a script tag, because the browser will download it once (via the script tag), and then a second time on the window.open.

refresh iframe after downloading a blob

I have a filebrowser on my server that uses Azure storage to store the files. The website has a feature where when you click on a file, it'll bring up a details window. I use ViewerJS to display a pdf preview of the file (if applicable), and it all works pretty well. The only problem is that when downloading the preview file, you have to reload the preview iframe manually to get it to display. The relevant php function is:
http://pastebin.com/sAyhsbfi
When this function is completed (I'm using ajax), the $.done function calls
response = JSON && JSON.parse(response) || jQuery.parseJSON(response);
$scope.pdfthingy=response; document.getElementById("viewerjs_preview").contentDocument.location.reload(true);
where response on the first line is set to the full pathname to the pdf preview file, and viewerjs_preview is the id of the relevant iframe.
For some reason, this isn't working, and the iframe isn't reloading itself. How do I make it do that when the blob has finished downloading, and pdfthingy is set?
Is the iframe’s domain the same as your host website’s domain? If not, we cannot access its contentDocument (or contentWindow) in host website’s JavaScript code.
To refresh the iframe, per my understanding you can set its src:
document.getElementById('viewerjs_preview').src = document.getElementById('viewerjs_preview').src;
Please note if the src contains a hash tag, we may need additional work. I’d like to suggest you to check What's the best way to reload / refresh an iframe using JavaScript? for more information.
Base on my experience, It is possible that we changed the IFrame URL, but the IFrame showed the preview contents. In this scenario, I suggest you can create the IFarme dynamic. For example, When you got the Blob URI form Azure storage, You could try to remove the Iframe and create a new. For instance, if Your preview content is shown in the iframe as :
<iframe id="viewerjs_preview" src = "/ViewerJS/#../azure blob storage url /pre-blobname .pdf " width='400' height='300' allowfullscreen webkitallowfullscreen></iframe>
You can try to use this code:
function recreateIFM() {
document.getElementById("viewerjs_preview").parentNode.removeChild(document.getElementById("viewerjs_preview"));
var ifm = document.createElement("iframe");
ifm.id = "viewerjs_preview";
ifm.width = "600px";
ifm.height = "400px";
ifm.src = "/ViewerJS/#../azure blob storage url /new-blobname .pdf";
document.body.appendChild(ifm);
}
Also, you can try MingXu's reference about how to refresh/reload the Iframe.
Regards,
Bill_Sww
I find the answer, the major reason is that we shouldn't use controllers to manipulate DOM.
sentence like document.getElementById("viewerjs_preview").contentDocument.location.reload(true) will not work anymore in angular scope, so you have to a directive to do it. I think the same question with you is and which's answer with most votes dose work well.
I think maybe my question was unclear, and for that I apologize. I'll try to go back and edit it tomorrow.
The solution for me was to, rather than set the src attribute of the iframe using angularjs, directly set it with
document.getElementById("iframe-id").src=/path_where_I_put_the_files/filename
(for reference I use "pdfthingy" to store the filename returned by the ajax call that downloads a blob).
This prevented the iframe from loading a null source before the filename was set.
This is perhaps part of why walkformusle has said that DOM should not be controlled in this manner.

Appending location.href to a form within an iframe

Here is what i got:
1=page containing a form
2=page containing an iframe of 1
I created an invisible textarea in a form, so it could be filled with URL of page that cointains an iframe.
Both 1 and 2 are on different domains. I got full access to both sites.
What im trying to do is to know where from was the form sent.
Not sure if im clear enough:
I already tried to append:
<script type="text/javascript">
$(document).ready(function() {
$('textarea#id_subject').append(window.parent.location.href)
});
</script>
to 1, but it didnt work. How could i achieve this, any idea?
BTW, this iframe is going to be attached to 10-100 other sites.
You can add url of parent window as GET parameter in iframe url:
This goes in parent page.
<iframe src="http://something.com/form.html?parent_url={your url goes here}">
</iframe>
It can be done both on server side or on client side. From inside of iframe you can access this value on server side (by reading GET parameter), or on client side (by reading location.href).
this iframe is going to be attached to 10-100 other sites
The Same Origin Policy is going to get in your way.
Pass the URL via some other technique. A query string in the src of the iframe is a reasonable bet.

Categories