I need to get the id of a div in the parent document of an iframed document. The actual scenario is I have a facebook application developed using FBML. The canvas page contains an iframe. If the user clicks on a button inside the iframed document, I need to display a div in the canvas page that is hidden when loading.
Thanks in advance...
did you try parent.document.getElementById('YOUR_ID'); ?
Are both documents (parent and iframe) in the same domain? If no, then browser doesn't allow you to access to parent document for security reasons.
EDIT: If both documents are in the same domain then you can access the element of parent document as follows:
var parentDoc = parent.document;
var el = parentDoc.getElementById("foobar");
try $(this).parent().attr('id')
Related
I'm opening some webiste by simply using:
window.location.href = "https://someaddress";
in my neutralino app.
How can I access html (dom) of the viewed page and interact with it?
Is it possible in neutralino.js?
You can access the DOM the same way you would in regular webpage.
For example: let myDivs = document.querySelectorAll("div") to select all div elements on the page.
I have a problem using an iFrame in an Bootstrap Modal. Its a News System, and i load the News Content from an iFrame from another Subdomain. Everything works fine, if a user clicks on an Image from the any news item, i want to open a Lightbox (Fancybox) in the Parent Window. Thats normally not the problem, i am using something like this:
// so i know its an Popup / has an iFrame (class Popup is when it is opened in an BS Modal) - otherwise ill go to my news size and show the article there.
$('a[rel="lightbox"]').click(function(e) {
e.preventDefault();
var link = $(this).attr('href');
if ($(this).closest('body').hasClass('popup')) {
parent.$.fancybox({
// this is without any popup
$.fancybox({
href: link,
...
My Images are on another Domain - like static.site.com. When ill go to news.site.com - and open an Popup (now its from the same domain) - and click an image - everything is fine, the
parent.$
works fine.
But, from the main site (www.site.com) when i am opening the Modal (Contents from news.site.com) and then click on the image (static.site.com) ill the the following error:
Error: Permission denied to access property '$'
I have already allowed the PHP Header to load content from another subdomain - but ill get still this error.
Do i need to use JSONP (to load the Content of the Page as HTML?) - or is there another, simpler Solution?
You need to set both domains to the same top level domain in JavaScript:
A page may change its own origin with some limitations. A script can set the value of document.domain to a subset of the current domain. If it does so, the shorter domain is used for subsequent origin checks.
So if you have static.example.com and news.example.com you should include this JavaScript to run before you try any cross-frame access:
document.domain = 'example.com';
You will need to run this code in both windows.
I'm struggling with some anchors / other html pages ( buttons on left) to be displayed in another div in the same page ( to be more exactly in the right ). Are there any solutions to this with div? Or maybe with frame/iframe, even jQuery any tips please?
Are there any solutions to this with div?
Fetch the content with JavaScript (e.g. XMLHttpRequest).
Strip out the bits you don't need (e.g. everything except the contents of the <body>
Use DOM manipulation to add it to the div
Or maybe with frame/iframe
That is exactly what iframes were designed for. Set the target attribute of the anchor to the name of the iframe
Loading content into a portion of a page comes with a lot of gotchas. At the very least it interferes with the ability of visitors to link to the content they are actually viewing (although you can use the History API and pushState to compensate for that). It is almost always a better idea to just link to a new page which includes (via a template) any content that is common to all the pages.
If the page links to a HTML page you can append an iframe using jQuery as follows:
$(document).ready(function(){
$('.button').click(function(){
// Prevent Default Action
event.preventDefault();
// get the href parameter
var url = $(this).attr('href');
// Append the iframe
$('#content').append('<iframe src="'+ url +'"></iframe>');
});
});
Here is a working Example
If you are able to return a JSON or XML response you can use $.ajax to get the response and then append it inside a div instead of an iframe.
For debugging purpose, I need to create an new xml document popup to display the (x)html source structure of my current document.
But the following code does not work:
var w = window.open();
w.document.open('text/xml');
w.document.write(window.document.documentElement.innerHTML);
w.document.close();
It seems that document.open() does not accept contentType anymore.
Is there any other solution ?
Just put a textarea in your existing page and copy the innerHTML into the textarea.
I have Silverlight application test page named A.html hosted in an iframe which is an element of B.html, so is there a way for Silverlight app to access elements in B.html by referring something like HtmlPage.Document..?
Thanks!
You can always walk up the DOM tree by doing something like this:
var htmlElement = HtmlPage.Document.DocumentElement.Parent;
In the container html page, add following function:
function GetParent
{
return parent;
}
In the SL control, do this:
HtmlWindow parent = (HtmlWindow)HtmlPage.Window.Invoke("GetParentWindow");
Now to invoke any function from the parent Html page, just call
parent.Invoke("myFunction");
Hope this solves your issue.
Ahmad.
Using Silverlight/Moonlight is very risky. Most of your website's guests will not have this plugin installed. This will strongly limit your website accessibility.
Use Flash instead, or even better use only [x]html+css+javascript.