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>
I have an iframe on my webpage that contains a linked qwebirc webchat that automatically logs visitors into irc with a temporary nick so all page visitors can instantly chat with each other.
I need to switch from qwebirc to kiwi irc, but it doesn't support autoconnecting.
** It will be connecting to our own irc server and I understand the risk of automatically joining visitors.
Since we cannot install a custom kiwi irc installation to our web server and customize it to autojoin, I know that I'll need to use a jquery function to automatically click the start button on the linked widget in the iframe.
Here is an example of what I'm working with:
<html>
<head>
<title></title>
</head>
<body bgcolor="#000000" link="#FFFFFF" vlink="#FF0000" alink="#FFA500">
<center>
<font face="tahoma" color="#FFFFFF">The "Start..." button below needs to be automatically clicked on page visit.</font>
<br><br>
<iframe src="https://kiwiirc.com/client/irc.MYCHATSERVER.net:6660/?nick=TESTNAME-?&theme=mini#TESTCHANNEL" height="400" width="400"></iframe>
</center>
</body>
</html>
(our server and channel have been renamed for this post, so it shouldn't actually connect)
I know that the function we need to use is:
$(document).ready(function(){
$('#some-id').trigger('click');
});
but I can't seem to find the id of the button.. the only thing I can find is the following line:
<button type="submit">Start...</button>
..that I found here: http://i.imgur.com/05IFHSZ.jpg
I'm not very good with javascript, but am a very willing learner and have a bit of a problem to solve. Any advice on how to incorporate the jquery code is greatly appreciated.
Thanks!!!
You will not be able to interact with elements inside the iframe using scripts from the parent document, or vice versa. This is a security measure and not something you can circumvent.
The same-origin policy restricts how a document or script loaded from
one origin can interact with a resource from another origin.
See Same-origin policy
I took a look at the IRC page and noticed that the button that needs to be clicked—<button type="submit">Start...</button>—is always the first button on the page. Therefore, you can use the following code to click it:
$("button").first().click()
note:
Concerning what pwdst said, you cannot script cross-domain (by default). However, this jQuery library may very well be worth looking into.
We have developed an offline HTML application - basically a collection of HTML pages with some JS and CSS resources (external files that are referenced in HTML page) to support it.
To run this app, all the client (customer) needs to do is to just open the "LandingPage.html" file in his IE Browser (client will only be using IE).
Recently the client asked for the application to be designed such that it automatically opens in full screen mode. So they don't want to be asked to press F11.
We implemented this using the many different JavaScript solutions available - but all of them use ActiveX / cause the security prompt to appear which the user has to acknowledge.
We cannot recommend the user to go and change the IE Security settings related to Active X Objects / Scripts / Initialization etc - that suggestion isn't well received.
The client wants the application to open in full screen -
Without showing any prompt / asking for acknowledgement
It should be automatic / it should not require user to press F11 or any other button.
They don't want the page to be opened in another window (we demo-ed the window.open solution too ... ) either.
Any suggestions to achieve this functionality? I know there are too many constraints ...
You may use a Launcher for the IE (may be some script or a HTA-file as well)
Example-HTA:
<html>
<head>
<hta:application
showintaskbar="no"
singleinstance="yes"
sysmenu="no"
windowstate="minimize"
>
<script>
IE = new ActiveXObject("InternetExplorer.Application") ;
IE.Visible = 1 ;
IE.navigate( "file://C:/path/to/LandingPage.html" ) ;
IE.TheaterMode=true;
//close HTA
self.close();
</script>
</head>
<body></body>
</html>
When you want to use it as script copy the first 4 lines of the <script/> into a file with the ending .js
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 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".