search

davidjbradshaw / iframe-resizer

Keep iFrames sized to their content.
https://iframe-resizer.com
Other
6.69k stars 982 forks source link

Using NodeBB forum as a child/content window of a Wordpress parent #691

Closed MostHated closed 5 years ago

MostHated commented 5 years ago

Good evening, Thank you for sharing this fantastic application, it seems like it is going to be extremely useful. I had a question on the best way to go about utilizing this, if you do not mind. I am currently using WordPress as the main window/parent and I have a page which has the following code in it:

<!-- WP/forum -->
<style>
    iframe {
        width: 1px;
        min-width: 100%;
    }
</style><iframe src="https://forum.mysite.dev" width="100%" scrolling="no"></iframe>

In my WordPress (WP), I follows some information that was linked that I had found somewhere (either here, or StackOverflow I think?) which has me make a child theme in WP and then add a new file called functions.php, which lets me add additional functionality without modifying the source files which has the code below. It also had me create a new .js file (iframe.js) in which I have the the code that is below that:

<?php
// functions.php
add_action( 'wp_enqueue_scripts', 'themify_add_scripts' );

function themify_add_scripts() {
        wp_enqueue_script( 'iframe-resize-js', get_template_directory_uri() . '/js/iframeResizer.min.js ', array(), '1.0.0', true );
        wp_enqueue_script( 'iframe-js', get_template_directory_uri() . '/js/iframe.js ', array(), '1.0.0', true );
    }
?>
// iframe.js
iFrameResize({
    log : false, 
}, '#forum_end');

Lastly, in NodeBB I created a widget and placed it as the footer of each page, which contains the following code:

<!-- NodeBB footer widget -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.0.4/iframeResizer.contentWindow.min.js" defer>
    </script> <a id="#forum_end"></a>

Now, everything works, for the most part, that is. My WP site has a forum tab in the menu, I hit that, it loads the static forum page (which ends up being https://mysite.dev/forum) and then the iframe loads the forum in it (which is https://forum.mysite.dev) and it resizes initially.

The two issues I am having are:

  1. If I click on, say, a user to view their profile, it resizes and looks great. If I go to anything that is a smaller height though, it never shrinks.

  2. I keep getting hundreds of the same message repeating over and over, which is the following, even with logging set to false: 

// Browser messages
[iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLElement] childList
[iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLLIElement] childList
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] Trigger event: Transition End
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] No change in size detected
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLElement] childList
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] No change in size detected
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLElement] childList
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] No change in size detected
[iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLElement] childList
VM2912 iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer0] No change in size detected
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLElement] childList
iframeResizer.contentWindow.js:169 [iFrameSizer][iFrameResizer0] No change in size detected
7 VM2702 iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer0] Trigger event: mutationObserver: [object HTMLElement] childList
7 VM2702 iframeResizer.contentWindow.min.js:9 [iFrameSizer][iFrameResizer0] No change in size detected

As well as these error messages:

content.js:29 Uncaught TypeError: Cannot read property 'indexOf' of null
    at Object.attrObserver (content.js:29)
    at MutationObserver.<anonymous> (content.js:137)

This is just from moving my mouse around the page. So I suppose my question might relate to both. I believe NodeBB loads it's pages without reloading the actual page. I was at first wondering if it was able to detect properly that anything was happening but it must, as it will get bigger each time, just not smaller. Is there a different way I need to go about setting this up for this type of application (Node.js) so it will properly work? I have been trying to look at other examples on github by just searching for "iframeResizer.contentWindow.js", but I have not been able to really find anything that seems to be using a similar setup.

Would you recommend addition of any other specific attributes or perhaps trying to call/execute a method of some sort between the parent/child? It seems likely that because NodeBB is a much more advanced application that just a standard html page that it probably requires use of some of the more advanced features of iframe-resizer, I honestly am just not sure which ones.

If perhaps you would be willing to throw me a suggestion, or point me in the right direction, I would greatly appreciate it! I will try to post this in the NodeBB forum as well, so that if there happens to be anything on the NodeBB side I have to do to try and accommodate this setup, someone there might be able to recommend it as well. I am hopeful that between your expertise in this, and theirs in NodeBB, a solid solution can be produced!

Thank you and I definitely appreciate the time and effort you have put into this library, -MH

MostHated commented 5 years ago

Looks like I finally got it worked out. I am kicking myself in the face though, because I spent several hours trying to diagnose why the contents were no longer communicating with the parent.

In NodeBB, there are different areas you can drag your widgets. Somehow my iframe-resizer code widget got moved to the "Drafts" section, which meant it was no longer showing up on the live page... image

I am just glad I got it all worked out. If anyone needs it, here is what I ended up using.

<!-- Code in a WordPress page block -->
<style>
iframe {
    width: 1px;
    min-width: 100%;
}
</style><iframe id="forum_frame" src="https://forum.mysite.dev" width="100%" scrolling="no"></iframe>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.0.4/iframeResizer.min.js"></script>
<script>
iFrameResize({
    log: false,
    checkOrigin: false,
    heightCalculationMethod: 'taggedElement'
}, '#forum_frame')
</script>
<!-- In NodeBB footer widget -->
<div data-iframe-height> &nbsp; </div> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.0.4/iframeResizer.contentWindow.min.js" defer></script>

It's important to note the \  (code for a blank space). Without it, the div is not able to be detected by iframe-resizer.

Thanks, -MH