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
Related
Setting src directly in iframe is working as expected
I'm trying to embed a Sharepoint document here.
For eg
<iframe src="https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&action=embedview"
width="476px"
height="288px" />
Whereas when I set the src in the script it's failing
<iframe id="x" width="476px" height="288px"></iframe>
<script>
document.getElementById('x').src = "https://rocketlane123-my.sharepoint.com/personal/lokeshkannan_rocketlane123_onmicrosoft_com/_layouts/15/Doc.aspx?sourcedoc={8822527b-0c56-44f9-8263-40c737db903c}&action=embedview";
</script>
This happens explicitly with SharePoint. So I would like to understand a couple of things here.
1. Am I doing something wrong?
2. Is there any CSP headers which block the parent from adding via JS?
3. Is there any official way from SharePoint to allow this?
3. Is there any way to hack this?
Thanks in advance.
Since this happens across chrome, safari and firefox I think it's not a bug in a specific browser.
Trying this in Firefox yields this error message:
To protect your security, login.microsoftonline.com will not allow
Firefox to display the page if another site has embedded it. To see
this page, you need to open it in a new window.
Opening the console gives this message:
The loading of [url] in a frame is denied by “X-Frame-Options“
directive set to “DENY“.
This is a header that's set by login.microsoft.com to disable embedding the link as an iframe.
This link details this design choice: https://learn.microsoft.com/en-us/sharepoint/troubleshoot/sites/cannot-display-sharepoint-pages-in-iframe
The link mentions you can override the behavior by setting 'AllowFraming', though it doesn't recommend it, as there may be site-breaking changes by embedding it.
A guide to use this feature can be found at this link
The problem is in, javascript amp; should not represent as &.
Change your link to
<body>
<iframe id="x" width="476px" height="288px"></iframe>
<script>
document.getElementById('x').src = "https://rocketlane123.sharepoint.com/sites/MyDocsforSP/_layouts/15/Doc.aspx?sourcedoc={6d327004-5d52-4e42-9707-c964631f8e65}&action=embedview";
</script>
</body>
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 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 two different web applications in different domains. in web app1, i have an iframe and its src refers a page which is in web app2.The page which needs to be loaded in an iframe has some JQuery.But the problem is it is not loading in an iframe. But if i access the same page in the same web app2 then it is working fine. It works fine in Fire fox and the issue is only with IE. am using IE7.
I have below code in the page which needs to be rendered in an iframe.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" ></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
Am i doing anything wrong here? Please help me!
Thanks!
IE can have issues with security when using IFrames.
Try setting your security mode to lowest for that site and see if it works (Making sure to set it back after testing to ensure your browser isn't left vulnerable!). If it does, change the code in the iframe to load the javascript from the same domain instead of the CDN. (or just try this first!)
It is possible that IE is preventing the content of the iframe from loading the JS from a seperate domain. You can check this using something like fiddler, see what calls the page makes after loading.
I'm experiencing rather strange behaviour in IE9 when loading a PDF in a frame with Javascript. The document will load once, but any subsequent invocation will result in SCRIPT65535: Invalid calling object.
I'm constructing my URL from Javascript and loading through top.framename.location.href='file1.pdf'. If you start with a PDF in the frame, it will fire the error upon the first invocation of the script.
So, it appears you are no longer allowed to modify the location.href property of a frame in which the Adobe Reader plugin (version 10) is loaded. The same code with HTML documents works fine.
Does anybody know why this behaviour was changed, and if there is a workaround other than using IE8 emulation with <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8">?
I'm also not looking for workarounds that completely avoid the Javascript. There are numerous options, like constructing the link elsewhere and loading it with a target attribute, but I'd really like to do this with Javascript.
If you want to test/reproduce, you can use:
<frameset cols="150,*">
<frame src="toc.html"/>
<frame src="about:blank" name="otherframe"/>
</frameset>
and in toc.html:
<a onclick="javascript:top.otherframe.location.href='1.pdf'">pdf1</a><br/>
<a onclick="javascript:top.otherframe.location.href='2.pdf'">pdf2</a>
Take a look here:
http://forum.jquery.com/topic/internet-explorer-9-jquery-and-divx
When I go to IE9 developer tools (F12) and under Script tab, click on
Start debugging button, I get details about the error: SCRIPT65535:
Invalid calling object script block (2), line 72 character 4
When you look at the script line 72, this line is highlighted:
appendChildOriginal(element);
Then I go to IE9, Manage add-ons, under Toolbars and Extensions, look
for Divx, LLC and disable Divx Plus Web Player HTML5 and DivX HiQ and
restart IE9 Browser.
The error is gone and my web application work perfectly.
Had the same problem.
In IE9, the frame object is replaced by some PDF object that doesn't contain the location property. So the second time you cannot update the frame url with location.
You can solve this by using window.open()
window.open('1.pdf', 'otherframe');