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/"
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've been working on a CSS / HTML drop down navigation for my blogspot.com site. After coding it a few hours I had accidentally closed the tab to find out no matter what or where I tried the CSS on blogspot, the CSS wouldn't work again. Now, the HTML/CSS works anywhere else, just not on blogspot anymore.
These are the things I did:
1. Created a entire new blog under the same account, then applied
html/css
2. Cleared cookies, cache and restarted browser
3. Tried multiple browsers
4. Used stylish extension to override
5. Used console in firefox to edit HTML on other sites and added my
code to see if it worked elseware
6. Used a different computer
7. Used mobile network instead of ISP
Despite doing everything pretty much to get the css/html to work blogspot, it will refuse it now no matter what. I am guessing it is obviously an issues with blogspot.com such as a glitch or bug that I may have now caused. It also shows a lot of CSS code struck out in the styles inspector when you inspect a site via right-click.
I dab in javascript / jquery sometimes and I am wondering if there is a way to force my CSS to force override.
CSS/HTML http://jsfiddle.net/rpksx66u/
My blogspot site: https://vitalintel.blogspot.com/
Im about to pull my hair out.
update: so I moved the css/html/script element to another part of the page and it works. When the element is placed in the Cross-Column's sections in layout, it refuses to use any CSS.
I'm using a Twitter widget and it works fine in IE8, until I put it inside an iFrame. The twitter widgets Javascript file is being loaded from within the iFrame, and as I said it works perfectly on it's own. Any ideas?
After a lot of testing it seems that the order in which the JavaScript is loaded was causing the problem. I had a lot of JavaScript on the page, and after moving the Twitter script tag above all other javascript or css tags in the head of my document it worked!
I cannot get JScrollpane to work when I save a page containing JScollpane onto my machine.
The problem is easy to reproduce (for Firefox 11.0, IE 8 and Opera) by saving down a copy of the following example page locally and loading the local page into a browser:
http://jscrollpane.kelvinluck.com/basic.html
This example works perfectly online, though, and looks great! I really like JScrollpane so am very keen to use it in my website - JScrollpane looks excellent!
Using the Firebug debugger I have tracked the problem down to line 164 of JScrollpane.js (unminified version) as follows:
contentHeight = pane[0].scrollHeight;
It appears to be a javascript, not a JScrollpane issue. For the local version of the example page (i.e. loaded from a file), the pane[0].scrollHeight appears to reflect the height of the div, not the height of the content that is enclosed within the div. This prevents the vertical scroll bar from initialising in JScrollpane and so the JScrollpane does not scroll.
Does anyone know why the scrollHeight does not work in this case? Please excuse if this is a question with an obvious answer as I'm very new to javascript and JQuery. Is there an easy work-around apart from modifying the JScrollpane javascript file?
I just want to be able to develop a web page containing JScrollpane locally without access to the internet.
Firefox does not save a 1:1 copy of a webpage. For example the link to the google cdn is converted etc.
I did a "git clone github.com/vitch/jScrollPane" and opened the basic.html example locally... Works fine...
I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!