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';
};
Related
At the moment, I am working on a website that works with Wordpress and Elementor (latest versions). I'm trying to implement an iframe using an html widget in the Elementor editor. The iframe works via an external website link (of a client) and I would like the iframe to automatically adjust in height to the content of the iframe. However, I am currently not getting this to work with the code below. In the Elementor editor itself it looks good, but on the website itself it is barely visible (due to the limited height) and it does not work. I have tried the following codes as well: height="auto", height="100%", but they didn't work either.
Does anyone know how I can fix this, please? I did try some solutions on other topics, but these didn't work either (and I'm not that good at coding). That's why I created a new topic.
The code used:
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script><script
type="text/javascript">iFrameResize({ inPageLinks: true },
'#externallinkname')</script><iframe id="externallinkname"
src="https:// externallink.com/"
width="100%" scrolling="no"></iframe>
- Note: The names of the following codes are changed, due clients privacy: #externallinkname, id="externallinkname", src="https:// externallink.com/"
I'm making a chrome extension that loads an <iframe> of another site onto the New Tab page. Right now I'm loading YouTube's subscription page (don't worry about the Same-Origin issue, I solved that already), but now I'm trying to cut everything out of the page except the #content element (the subscription feed element).
Here's my code:
Background.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<iframe id="left" src="left.html" name="left"></iframe>
<iframe id="right" src="right.html" name="right"></iframe>
</html>
Left and Right .html
<!DOCTYPE html>
<html>
<body>
<input type="button" value="Load new document" id="loader">
</body>
<script type="text/javascript" src="window.js"></script>
</html>
Window.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("loader").addEventListener("click", loadUrl);
});
function loadUrl()
{
window.location = 'https://www.youtube.com/feed/subscriptions';
[].forEach.call(document.querySelectorAll(!'#content'),function(e){
e.parentNode.removeChild(e);
});
return false;
}
As you can see, right now I'm loading it in with a button. Once it's pressed, it loads YouTube and should cut out all the html except #content, but it's not. Is there another way to solve this, possibly with jQuery? Thanks!
document.querySelectorAll(!'#content')
won't meet your requirements, you should use the following instead if you do want to remove all elements except #content.
document.querySelectorAll('*:not(#content)')
#content isn't accessible to document, because the global document is on a different page - the page containing the iframes, but not their contents. Moreover, document.querySelectorAll(!'#content') is not a valid selector string - that will be interpreted as document.querySelectorAll(false) because ! of a non-empty string returns false.
You're going to have a hard time getting access to the contents of an iframe, just in general. Most browsers, like Chrome, won't event load the contents of an iframe if X-Frame-Options is set to SAMEORIGIN, which, for youtube, it certainly is.
Supposing you're getting around this (with a reverse proxy, perhaps?), you can get the contents of an iframe using JavaScript like so:
iframe.contentWindow.document
You can then use querySelector and friends on the iframe:
iframeDocument.querySelector('#content')
And if you want to cut out a node, you should remove() it:
iframeDocument.querySelector('#content').remove()
Now, having said all of that:
Don't do this.
You're abusing iframes, which requires some very creative (read: brittle, hacky) code, and Youtube certainly has a public API from which you can get access to someone's Youtube feed - and in a way that Youtube is far less likely to block by tightening security, or even by accident. (Suppose the HTML on their page changes, so #content contains everything. Or suppose they decide to check that the correct origin is requesting the page with JavaScript, and block you.)
What you want, you should use Youtube's API for.
I've asked this question before this one, trying to figure out why I was seeing scrollbars on the a-ads iframes, on this website, while some swear they didn't see them!
Hence, I have discovered that the appearance of the iFrame scrollbars is by execution order. And with faster or slower computers, results may vary.
I realize that I have to replace scrolling="no", a strong (but unsupported in HTML5), attribute that forces no scrollbars on iframes, with a JavaScript, or CSS alternative. However, the CSS overflow:hidden; is too weak to override whatever style the iframe's source may contain (e.g. overflow:scroll, overflow:auto, etc.). So the solution must be with JavaScript.
The caveat however, is that the javascript must activate after the iframe itself is loaded, but before the source (src="") is loaded. Because if scrolling="no" is replaced after the source is loaded it has no effect on the outcome of the iframe display. Though, if it is place before the <iframe> tag markup is reached, how does the JavaScript know what to modify? It is as good as not present at that point.
One More Problem: The source can't be stripped from the <iframe> tag, and replaced in JavaScript. We've tried that, and while it worked....sort of... we lost ad impressions and clicks into a black hole, because the spider (i.e. bot) at a-ads couldn't, or had problems with, detecting the proper a-ads code on the webpage. But if we left it in the iframe and just reloaded the source after scrolling="no" was set, then that would result in double ad-loads (i.e. invalid impressions).
This is a real pickle!
All the Einsteins of the world - You're Needed!
Also, this S.O. question doesn't apply.
Screenshots
Chrome Proof
IE Proof
Opera Proof
Firefox was best-behaved
This issue has now been solved, for now, I think. Here is the solution:
<head>
<script type="text/javascript">
function noScrollBarsOnAAdUnit( ElementID )
{
document.getElementById( ElementID ).setAttribute("scrolling", "no");
return true;
};
</script>
</head>
<body>
<script type="text/javascript">noScrollBarsOnAAdUnit( 'aa-unit-top-center' );</script>
<iframe id='aa-unit-top-center' style='width:468px;height:60px;' class='a-ads-frame' data-aa='[ad-id]' src='https://ad.a-ads.com/[ad-id]?size=468x60'>
<!-- iframe fallback message here -->
</iframe>
<script type="text/javascript">noScrollBarsOnAAdUnit( 'aa-unit-top-center' );</script>
</body>
Fellow S.O. members, please, check this page, to assure this fix is consistent, and really works at least 99.99%, if not 100%, of the time.
Thanks!
-James A.
Explanation of problem in full below, you could probably just skip to the code at the bottom if you want.
What happened is a impatient client wanted his swf banners converted to html5 without having to actually code them from scratch. So i utilized Google's new tool, Swiffy. I then tried to place this new generated html5 page in the header of the clients wordpress site. I have gotten it to load as an iframe but the problem that I am encountering is when you click on a link on the loaded html5 page, it just loads the linked page in the iframe, not the parent page/window (which is to be expected). I tried a bunch of other methods, and tried changing the AS2 links in the .fla as well but no luck. I am guessing Swiffy can not read every AS2 code, and so it has been ignoring my "_blank", "_parent" when I use getURL. Anyway, I have been trying to get it so when the iframe unloads to go to the linked page, it uses Java to just open the link on the parent page. But iframes cant use the onunload event, but I am pretty sure framesets can. So this is the code I was trying and it doesnt work.
<frameset rows="100%" onunload="window.open('http://www.goaefis.com/about-aefis/what-is-aefis/','_parent');">
<frame src="www.goaefis.com/banner_Test.html" frameborder="0" scrolling="no" />
</frameset>
Any help will be super appreciated.
try to use the "target" on your frames.
Here's a example:
http://www.w3.org/TR/html4/present/frames.html
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;