I have a main page that loads a default link in an iframe http://mypage.com/myurl. Having it in a blog, I want to dynamically change that default link inside the iframe, for every post page. I load the default link like that:
<iframe width='1000' height='500' name='iframename' frameborder='0'
src='http:/mypage.com/myurl'></iframe>
(works on all browsers) and i change dynamically the link inside the iframe by putting this code in every post page:
<script type="text/javascript">
document.iframename.location = "http://mypage.com/mynewurl";
</script>
It works fine on chrome and ie, but it does not work on firefox!!
Any ideas or work around?
Here a simplified example www.tinyurl.com/9l7zt2n see the difference with firefox it loads the default link in the iframe. ie and chrome can change with the added javascript.
If it helps to test it on the blog www.tinyurl.com/9axhquh u can see it working on chrome and ie, if u click on any post title or "read more" to load the post's page, the iframe on top changes accordingly
Any ideas or work around?
document.iframename.location is probably not supported crossbrowser.
try:
<iframe width='1000' height='500' id='iframeid' frameborder='0' src='http:/mypage.com/myurl'></iframe>
<script type="text/javascript">
document.getElementById('iframeid').src = "http://mypage.com/mynewurl";
</script>
this means:
accessing an element by name through a document.elementName syntax is not supported.
an iframe element has no property called location. location is a property of window. You can access the window of an iframe by using using contentWindow.
I've written a short test here http://jsfiddle.net/FyNW9/. Run it in different browsers.
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>
I am attempting to make my website use TLS / https. This problem occurs only on the https version and not the older http version of the website.
I have a link on my website which when clicked reveals an iframe on top of the rest of the website content.
The link looks like this:
Speed Check
It reveals this div (slightly modified to remove my actual URL)
<div id="speedtestmodal" class="reveal-modal tiny open" data-reveal="" role="dialog" style="display: block; opacity: 1; visibility: visible; top: 1130px;" area-hidden="true">
<iframe width="620" height="420" style="visibility:;" id="example" src="https://page.domain.com" scrolling="no" frameborder="0"></iframe>
</div>
This works and the iframe and expected content is visible, the problem I have is that the page in the iframe contains a text box which the user should fill in. This behaves as expected in Firefox but in Chrome or IE attempting to click into the text box closes the entire Iframe.
The website is beta.domain.com and the iframe is page.domain.com so I thought the problem may be related to cross domain JS calls, to try and get around this I added the following to the head on both websites (as described at http://madskristensen.net/post/iframe-cross-domain-javascript-calls):
<script type="text/javascript">
document.domain ='domain.com';
</script>
But it has made no difference. Is there something that I'm missing here?
Is there any more information that I can provide to help debug this?
It turned out the problem was CSS related and it was only working in firefox due to a bug in the browser.
The Z-index value of the modal was causing it to be hidden behind another semi-transparent modal which is part of a separate function of the website.
I have an iFrame that is included in my HTML and is available when the page loads. When the page first loads, the iFrame has no content/src. I am using jQuery to insert content into the iFrame dynamically. When a user clicks a link on my page, the contents of the iFrame are updated. All of this is working for me.
However, I am struggling to adjust the height of the iFrame when new content is loaded. I have tried several solutions on Stack Overflow but with no success. Here is my iFrame code:
<iframe id="myframe" width="100%" frameborder="0"></iframe>
Here is my jQuery that changes the HTML inside of my iFrame:
emailOpened.find('#myframe').contents().find('body').html(email.body);
This works for me. I just need my iFrame to adjust its height based on the height of the content being injected. I have failed on all attempts with this part.
Update
Here is my new HTML:
<iframe id="myframe" width="100%" frameborder="0">
<body onload="parent.resizeIframe(document.body.scrollHeight);">
</iframe>
If you need mobile support and allow (user) scrolling for the iframe check out https://github.com/davidjbradshaw/iframe-resizer a as drop-in solution which fixes different issues on iOS and android.
how to properly display an iFrame in mobile safari
https://encrypted.google.com/search?q=iframe+resize+ios+issue
I had to support mobile devices as well and ended up using it after some hours of research and testing. I've also used the provided message channel to send messages to the inner document back and forth.
Call this function directly after the html has been changed.
function resizeIframe() {
var newHeight = document.getElementById('myframe').contentDocument.body.scrollHeight;
document.getElementById('myframe').style.height = parseInt(newHeight,10) + 10 + 'px';
}
I am basically trying to prevent any custom dialog boxes to be shown in my webpage.
Basically third party ad-networks, which at times may use some malicious code to show alert() to the end user.
I've come across a simple way, to override the alert on the main page:
Window.prototype.alert = function() {console.log("alert prevented!")}
So for a basic html page like this, it works just fine:
<html>
<body>
<script>
Window.prototype.alert = function() {console.log("an alert was averted");}
</script>
<div>
<a onclick="alert(1)"> This is an alert inside the body</a>
</div>
</body>
</html>
But introduce an iframe in the picture, and the alert within the iframe would pop-up.
What I still want to achieve is, if there is an <iframe> or anything similar HTML component, which basically would create a separate window, should also not be allowed to display any alert().
I'm not quite sure if this is possible, but still any suggestions?
It is probably not possible for old browsers, but newer browsers honor the sandbox attribute in iframe. “Newer” means IE 10 or newer or any reasonable new version of Chrome or Firefox. See support details.
For example, if you wish to disallow popups only, use this:
<iframe src=foo.html sandbox=
"allow-forms allow-pointer-lock allow-same-origin
allow-scripts allow-top-navigation."></iframe>
Here I have listed all the possible values that this attribute value may contain except allow-popups, so that’s the only feature that will be disabled by the attribute.
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.