CODEWITHSUNDEEP
javascriptiframepostwidget
pedalpete
pedalpete

Reputation: 21546

post data to iframe on javascript load for widget

I have a little widget which has quite a few customizable options. The widget is currently retrieved by a combination of javascript creating an iframe, and the iframe contains a bunch of javascript and jquery to build the page.

I can't add the complexity of conflicting javascript to the embed page, that is why i build an iframe, and run the widget within that.

However, I am a bit concerned about the length of variables may be too long, and might fail in "Get".

Is there a way to send the src of the iframe with the variables in a POST? There is no form which gets submitted. The page within the iframe is written in php.

Here's how my javascript builds the page currently. 

<script type="text/javascript">
 var myWidget_config = {
        key: 'your api key',
        start: 'a test',
        backgroundImage: 'http://background image if the user wants one',  
        optionLink: 'http://optional link to the embeds site', 
        mainText: 'fff', 
        subText: '404040',  
        linkText: '0D1C5D',
        showColor: '',  
        altBackColor:'',
        BorderColor:'3667C1',
        height: '400px', 
        width: '', 
        resultsPerPage: '3'   
                    }
</script>
<script type="text/javascript" src="http://mysite/scripts/setWidget.js"></script>

The 'setWidget.js' page looks like this

var query='';
for(var key in myWidget_config)
  query += '&'+key+'='+encodeURIComponent(myWidget_config[key]);

  document.write("<iframe frameborder="0" src="http://localhost/widgets/module.php/?'+query+'" width="'+myWidget_config.width+'" height="'+myWidget_config.height+'" scrolling="no"></iframe>');

This is only running locally, so I can't show you a link.

Is there a nice clean way for me to send the variables to the php page via post, or other method which would be better than just appending the query to the src string?

Upvotes: 1

Views: 1626

Answers (1)

Eli Grey
Eli Grey

Reputation: 35895

  • Cross-domain XMLHttpRequest using POST (requires that the requested site sends an appropriate Access-Control-Allow-Origin header)
  • Create a form using POST and submit it using JavaScript. For each parameter, create an <input type="hidden"/> element.

Upvotes: 2

Related Questions