Why IE not showing BG mage like firefox in Iframe?
I do not have access of iframed page.
any CSS or javascript solution
As well as adding the CSS style background-color:transparent; to the iframe document's body element, you will also need to add the allowtransparency attribute to the iframe element in the containing document.
See http://msdn.microsoft.com/en-us/library/ms533072(VS.85).aspx for more information.
If you can't modify the iframe's document then you are out of luck. Maybe there's another source you can use for the data that provides it in a different format such as XML or JSON?
Add this CSS code to the document that's included by the iframe: background-color:transparent;
Related
I am trying to grab the Iframe from here:
http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc126/
The code is here:
<iframe width=940 height=700 src="http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc126/" scrolling=no frameborder=0/>
but when I add it in the plain text editor on WP it does not work, just a huge white space.
Now I am thinking this is a problem with the Iframe itself? It has no tag, so maybe this is why?
Check if your browser supports iframe or not. Check
I have been tasked to use this approach a SharePoint 2013 site, so here goes.
Background: - I have a page in a SharePoint 2013 site, which has a "content editor" webpart displaying a page from within the same domain/site collection. The below code (which is not mine) I have placed in the content editor and it displays the page all fine.
Issue - My requirement is to "remove the globalnav" from the page within the content editor which I presume is using an Iframe. Now I can use the F12 dev tools with IE11 and find the CSS class which is the follow - ms-dialog #globalNavBox and set the display to "none" this is exactly how I want it to look.
The only thing I do not know how to achieve here is how to make this happen via using some sort of code on the page displaying the embedded page.??
this is the code I am using in the content editor to display my page I want to modify.
#mydiv{
width:1280px; height:1000px;
overflow:hidden;
;
}
#myframe{
;
top:-190px;
left:-100px;
width:1080px;
height:1000px;
}
</style>
<div id="mydiv">
<iframe id="myframe" src="/gen/genInduction/Lists...blah scrolling="no"></iframe> </div>
now I have no idea how to add in the code (if I can) to remove the css .ms-dialog #globalNavBox {display: none;} so that when the page is displayed the globalnav is removed.
I hope this makes sense as this is the first time I have used this site to ask a question. I have also searched endlessly before I asked this question and have tried various things to make this work but I just cant/understand how to make this happen.
Place the following in the page after the iframe
<script>
document.getElementById("myframe").contentDocument.getElementById("globalNavBox").style.display="none";
</script>
I believe you'll still be able to access the iframe's content since they both belong to the same domain, unless the iframe is sandboxed (which the example clearly shows it isn't). Adding to JBiserkov's slick streamlined answer, this will cover some concerns with loading of the iframe. Under many circumstances, an iframe might be a little late to the party, so you should be prepared for that. The following links helped me understand iframes:
Iframes, Onload, and Document.domain
Iframe Tutorials
-Reference to the iframe
var iFrame = document.getElementById('myframe'),
-Reference to the iframe's document object
-This shorthand conditional expression is the key to accessing any content inside the iframed page.
iDoc = iFrame.contentDocument ? iFrame.contentDocument : iFrame.contentWindow.document,
-Reference to the target element #globalNavBox
gNav = iDoc.getElementById('globalNavBox');
-When the iframe is loaded, grab globalNavBox's style to "display" and set to "none"
iframe.onload = function () {
gNav.style.display = 'none';
};
I am developing a firefox addon,
in my settings page dialog.xul i have an iframe where i load different settings pages page1.xul page2.xul page3.xul
Iframe :
<vbox flex="1">
<iframe
id="iframe"
src="chrome://xxx/content/page1.xul"
flex="1"></iframe>
</vbox>
Within the iframe i need to navigate from page2.xul to page3.xul
with the code in page2.xul
My code (page2.xul) :
gBrowser.loadURI("chrome://xxx/content/page3.xul");
Also tried
document.getElementById("iframe").setAttribute("src", "chrome://xxx/content/page3.xul");
but it's not working i know iframe container is not accessible from the iframe but how can i do that redirection ?
With iframe in XUL you must create it with the HTML namespace otherwise things like load events don't work right, see this topic: http://forums.mozillazine.org/viewtopic.php?f=19&t=2809781&hilit=+iframe
Once you do that, changing src etc should work as expected.
Solution :
I managed to handle the code in the main XUL
Apparently XUL does not support the structure
[XUL1 >> iframe(XUL2 : change something in XUL1)]
This structure is not supported in classic HTML + Javascript for security reason
and it's also the case in XUL
In Firefox 3 and later (and probably older versions), selecting content within an iframe always seems to use the grey selection background colour used for a document that doesn't currently have focus, even if the iframe does have focus. The only exception I have been able to find is when the content within the iframe is editable. This is not the case in other browsers. Here's an example illustrating this:
http://jsfiddle.net/97Vjz/
This unfortunately prevents styling the selection within an iframe using the ::-moz-selection CSS pseudo-element because it only applies to non-grey selections:
http://jsfiddle.net/YYXSY/1/
My question is: is it possible to prevent an iframe's selection being grey in Firefox without using contenteditable / designMode?
UPDATE
This only seems to happen on dynamically written iframes: using a separate file and the src attribute solves the problem. However, I do need it to work with dynamically written iframes.
I just tried to reproduce the problem with a "real" page as iframe content and then it works like you want: blue colored selection! (FF 5.0)
see: http://jsfiddle.net/97Vjz/8/
It seems only generated content has this problem, so you could make a page (php/asp(x)) that generates the content for you to circumvent the problem.
Another solution to use javascript generated content is to load it with src="javascript:'<html />'" (actually this is Tim's own solution from the comments below.)
A simple example script: http://jsfiddle.net/97Vjz/9/
iframe.src='javascript:\'<html><body>' + content + '</body></html>\'';
There is a property of the iframe exposed in Firebug's DOM inspector contentDocument->designMode which is set to false for you iFrames. Forcing it to true through the DOM inspector enables the blue highlight you're after.
Hypothesis: It seems that for dynamically written iFrames, either a XUL Iframe is rendered or the Gecko engine doesn't honor the styles.
Short of submitting a bug, the only workaround I can see is to wrap our contents in a textarea and style it to make it 'invisible': http://jsfiddle.net/mrchief/YYXSY/19/
I'm using JavaScript on Mozilla (version 4). Once I get a DOM object and identify the tag as an IFRAME I'd like to get the content and the borders (x,y pixels)of the IFRAME, (if I understand correctly the Iframe is an additional HTML page inside another HTML).
Look here: https://developer.mozilla.org/en/DOM/HTMLIFrameElement
contentDocument and frameborder are probably what you are looking for.