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 have a page that is built with 7 different iframes:
<iframe id="leftframe" src="structure/leftbar.php"></iframe>
<iframe id="headerframe" src="structure/header.php"></iframe>
<iframe id="menuframe" src="structure/menu.php"></iframe>
<iframe id="timerframe" src="structure/times.php"></iframe>
<iframe id="settingsframe"></iframe>
<iframe id="contentframe" name="contentframe"></iframe>
<iframe id="chatframe" src="chat/index.php"></iframe>
I have a .php that is being run in the "contentframe". When I click a button in it, it sends a post to a .php. The .php functions properly but at the end of it, I want it to reload the leftframe frame.
I tried the suggestions on these pages:
How to refresh an IFrame using Javascript?
What's the best way to reload / refresh an iframe using JavaScript?
but neither of these seem to work.
in the .php I am trying:
?>
<script>
parent.getElementById('leftframe').location.reload();
alert("Ping");
</script>
<?php
This doesn't work either. Any suggestions?
Thanks!
Using back-end to refresh an iframe when you can do it client-side is absolutely wrong.
It works for me:
<script>
document.getElementById('leftFrame').contentWindow.location.reload();
alert('Ping');
</script>
And, yes, are you sure you need iframes?
It is definitely not a good practice. Especially, in a century of powerful JS and its frameworks and AJAX. It would be better if you updated the content of DOM element instead of refreshing iframe.
The return value of document.location.href will become javascript:window["contents"] sometimes.
When it will happened? how to avoid it?
I found out
The code is placed in an iframe without src url.
<iframe id="google_ads_iframe_/21202031/LTN-000-03-HOME-120X600-DISPLAY_0" name="google_ads_iframe_/21202031/LTN-000-03-HOME-120X600-DISPLAY_0" width="120" height="600" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" src="javascript:"<html><body style='background:transparent'></body></html>"" style="border: 0px; vertical-align: bottom;"></iframe>
As you already have suspected, this indeed has to do with (I)Frames and more specifically, the way some scripts/libraries work with those frames.
It is a technique to avoid a ReferenceError (in IE) in some cases when loading an external javascript (that is loaded asynchronous) which holds/provides variables/objects that are used in the frame's inline-script-source.
To quote the most relevant part from an article called 'inject content into a new iframe' :
Instead of using document.open/write/close we use the following
approach:
iframe.contentWindow.contents = content;
iframe.src = 'javascript:window["contents"]';
First, we assign the dynamic content to a variable on the iframe’s
window object. Then we invoke it via the javascript: scheme. This not
only renders the HTML properly, but loads and executes the scripts in
the desired order.
This is also in-line with a similar answer on SO.
Hope this helps!
For me I have 3 tabs that open with Internet Explorer ... Yahoo, MSN and my email account. Went to "tools" >Internet Options and removed Yahoo, okay and closed. After I verified that I no longer got the java script error tab I reinstalled Yahoo and that solved the problem.
I would like to create an <iframe> on the page, but then add the src later. If I make an iframe without an src attribute, then it loads the current page in some browsers. What is the correct value to set for the src so that it just loads a blank iframe?
The answers I've seen are:
about:blank
javascript:false
javascript:void(0)
javascript:"";
url to a blank page
Is there a clear winner? If not, what are the tradeoffs?
I'd like to not have mixed content warnings for HTTPS urls, nor any back-button, history, or reload weirdness in all browsers from IE6 onward.
Not sure if all browsers support "about:blank", so I'd just go with your own blank page then.
Another idea: Why not add the whole iframe using javascript instead of just the src?
Standard approach when creating an "empty" iframe (as an iframe shim, for example), is to set the src as javascript:false;. This is the method used by most of the JavaScript libraries that create iframe shims for you (e.g. YUI's Overlay).
What about
about:blank
Re your comment clarifying that you're planning to use the iframe as the target for a form submission:
I would use an empty document on the server that sends back a 204 no content.
It avoids
"mixed content" warnings in IE and HTTPS mode
Unnecessary errors because a client doesn't understand the javascript: protocol
and other exotic shenanigans.
It's also valid HTML.
So what if it generates an extra request? Set the caching headers right, and there will be only one request for each client.
javascript:false:
IE10 and FF (checked in v23 in Linux) will show 'false' as content.
javascript:void(0) && javascript:;:
IE will show 'cannot display the webpage' error in the iframe. Also, when setting the src from a valid url to javascript:void(0), the page will not get blank.
about:blank:
Works in all browsers but IE 9 sends an request to the server with path "null". Still the best bet IMO
Checkout http://jsfiddle.net/eybDj/1
Checkout http://jsfiddle.net/sv_in/gRU3V/ to see how iframe src changes on dynamic updation with JS
javascript:false works in modern browsers.
What I've seen is that this only "fails" when dumb spiders try to load javascript:false as a page.
Solution: Block the dumb spiders.
As I posted in this question: Is an empty iframe src valid?, it looks acceptable to just leave out the src= attribute completely.
IMO: if you don't put the src, your page won't validate. But's about it.
If you put a src="", your server will log many 404 errors.
Nothing is really wrong as in "damaging". But then, is it actually not wrong to use an iframe in itself?
°-
Yes, I know I'm reviving an old thread. Sue me. I'm interested in the answer.
I don't understand why having the trigger being a form submit precludes dynamically creating the IFrame. Does this not do exactly what you want?
<html>
<head>
<script type="text/javascript">
function setIFrame(elemName, target, width, height) {
document.getElementById(elemName).innerHTML="<iframe width="+width+" height="+height+" src='"+target+"'></iframe>";
}
</script>
</head>
<body>
<div id="iframe" style="width:400px; height:200px"></div>
<form onSubmit="setIFrame('iframe', 'http://www.google.com', 400, 200); return false;">
<input type="submit" value="Set IFrame"/>
</form>
</body>
</html>
I run into this line of code:
iframe.setAttribute("src", "javascript:false");
as well. I wanted to remove javascript:URL.
Found this note from the Web Hypertext Application Technology Working Group [Updated 2 October 2019]
[https://html.spec.whatwg.org/multipage/iframe-embed-object.html#the-iframe-element][4.8.5_The_iframe_element]
The otherwise steps for iframe or frame elements are as follows:
If the element has no src attribute specified, or its value is the
empty string, let url be the URL "about:blank".