Hello, I need to include an external page (it’s internal to the website, same domain, but it’s not part of wordpress)… how can I do this?
I tried using the COLUM CONTENT element in TD COMPOSER but it doesn’t let me add PHP code. What’s the workaround?
Thank you
Hi,
Sorry, our theme do not has this option.
Please check this article -> https://www.quora.com/How-do-I-embed-content-from-other-sites-external-webpage-section-of-a-page-in-my-WordPress-page
How to embed WordPress iFrame: With and without using plugin
Hope this will help you!
You are saying I should use <iframe>? But where in TD composer can I add an iFrame???
Hi,
The iFrame as shortcode can be set with tagDiv Composer in a column text or a text with title in text area -> https://imgur.com/mdPpuaM
Thank you!
Great! Thanks for the answer…
this solution works but I can’t seem to be able to add JS, can I?
I wanted to be able to add this:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.documentElement.scrollHeight + 'px';
}
</script>
so that the iFrame resizes in height automatically based on the content I am including. Is this possible?
Hi,
So if the js is not working in column text, then you should set it in theme panel -> https://i.imgur.com/8QMXM8Q.png or if this need to be set in head or before end of body -> https://i.imgur.com/UoDfmsi.png
Thank you!
I tried that but unfortunately in the onLoad() action of the iFrame is removed from the Column Text by TD Composer and so the JS doesn’t run
Hi,
Is possible that the java-script that you want to use to interfere with the theme scripts.
What method did you use to check it, maybe I can help.
Thank you!
I just had an onLoad action in the iFrame:
<iframe src="url" onload="resizeIframe(this);"><iframe>
Hi,
I’ve try to but is look that this is not working with our theme, but you can use an inline css style -> https://i.imgur.com/R4p4drT.png this will solved the problem with iframe width and height.
Thank you!
I am looking for a way to resize the iFrame according to the contents of the iFrame. Does inline CSS do that?
Hi,
Yes, the inline css will do the work, is no need for css, if you want you can test it here -> https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_height you can set the width 100% and it will adapt for all screens.
Thank you!
Actually your code doesn’t work and the link you sent does not auto-resize the iFrame based on content.
I did find a link online that does this:
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="http://tagdiv.com" id="iFrame1"></iframe>
However the problem is that when I use this the width of the iFrame is set to about 200… in fact I notice that even if I don’t add any code and I add an iFrame into the TD Composer content column it’s width is about 200px… is there some min-width definition in the Newspaper X theme that forces iFrames to be 200px or any reason why even in the preview the iFrame would not be 100% if I’m setting it’s width at 100%?
Hi,
I think that is a misunderstanding!
Please try like this -> https://i.imgur.com/DDZEERU.png the code can be get from here ->
https://pastebin.com/h4fVHi9V just adjust the height if is need.
Let me know the results!
Thank you!
sorry but that still doesn’t work… the iFrame does not resize
Hi,
Did you do it as in my screenshots? you can see that for me is working, there must be something different.
Please provide some screenshots with the implementation that you do, in this way I can find the problem.
Thank you for your understanding!
Your screenshot is assigning a height to the iFrame. I am trying to have the height of the iFrame dynamically set based on the contents loaded inside the iFrame… so I don’t want it to be set to 400px, I want it to be se to 200px if there are 200px worth of material, or 400px if there are 400px worth of content etc…
Hi,
Unfortunately this is the only help that I can provide for this custom integration, if you need other kind of custom code, you’ll need to access our custom services or try another way to integrate the external pages.
Thank you for your understanding!
