Is there a way to expand an advert outside of the window width within a GPT (Google Publisher Tag) Safeframe?

问题

I am trying to create an advert that will expand past the side of the page. Using the GPT Safeframe preview tool I am receiving the error "Invalid EXPAND_REQUEST message. Reason: Viewport or document body not large enough to expand into."

Is there a setting to override this or is this a self imposed limitation,

Here is an example of what I am trying to do: you can test it out here: http://publisherconsole.appspot.com/safeframe/creative-preview.html

<div id="container">
    <style type="text/css">
        #container {
          background-color: #EEF;
          width: 500px;
          height: 500px;
        }

        button {
          width: 50px;
          height: 50px;
          font-size: 30px;
          padding: 0px;
        }

        #info {
          position: relative;
          top: 10%;
          width: 390px;
          margin: auto;
        }

        #left {
          left: 0px;
          bottom: 50%;
          position: fixed;
        }

        #right {
          right: 0px;
          top: 50%;
          position: fixed;
        }

        #top {
          top: 0px;
          left: 50%;
          position: fixed;
        }

        #bottom {
          bottom: 0px;;
          right: 50%;
          position: fixed;
        }

        #central-buttons {
          margin: 10px auto;
          display: block;
          width: 210px;
        }

        #central-buttons button {
          font-size: 15px;
          width: 100px;
        }
    </style>
    <script>
      function expand(direction) {
        var allowedExp= $sf.ext.geom().exp;
        var config = {
          push: false,
          t: 0,
          l: 0,
          r: 0,
          b: 0
        };
        var all = direction === 'all';
        if (direction === 'left' || all) {
          config.l = allowedExp.l / 2;
        }
        if (direction === 'right' || all) {
          config.r = 900;
        }
        if (direction === 'top' || all) {
          config.t = allowedExp.t / 2;
        }
        if (direction === 'bottom' || all) {
          config.b = allowedExp.b / 2;
        };
        $sf.ext.expand(config);
      }

      function collapse() {
        $sf.ext.collapse();
      }

      function adjustDivContainerSize() {
        var self = $sf.ext.geom().self;
        var el = document.getElementById('container');
        el.style.width = (self.r - self.l) + 'px';
        el.style.height = (self.b - self.t) + 'px';
      }

      $sf.ext.register(500, 500, function(status, data) {
        if (status === 'geom-update') {
          return;
        }
        var message = 'Status: ' + status + '. Data: <pre>' + JSON.stringify(data, null, ' ') + '</pre>';
        document.getElementById('status').innerHTML = message;
        adjustDivContainerSize();
      });

      adjustDivContainerSize();
    </script>
    <div id="info">
        <span>
            <strong> $sf.ext.expand by overlay and $sf.ext.collapse</strong>
            <br>Creative should be expanded when buttons are clicked. Expansion can be performed
            only from collapsed state so subsequent expansion won't work until creative is collapsed.
        </span>
        <div id="central-buttons">
            <button id="collapse" onclick="collapse();">Collapse</button>
            <button onclick="expand('all');">Expand all</button>
        </div>
        <div id="status"></div>
    </div>
    <button id="left" onclick="expand('left');">&#8656</button>
    <button id="top" onclick="expand('top');">&#8657;</button>
    <button id="right" onclick="expand('right');">&#8658</button>
    <button id="bottom" onclick="expand('bottom');">&#8659</button>
</div> 

回答1:

unfortunately, it's not possible to avoid this behaviour, but i made a workaround, that will "wait", until user is scrolled in place, that is suitable to expand, check this example, that will push banner from bottom, when user have enought space from bottom to expand whole creative:

<div id="container">
    some lines to make container height<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>
    line<br>

    <script>
        // global expanded indicator variable, because API don't have any 
        var expanded = false;
        function expand() {
            var self= $sf.ext.geom().self;
            var config = {
                push: true,
                b: 0
            };

            var el = document.getElementById('container');
            var containerHeight = el.offsetHeight;

            // get height from bottom, that need to be expanded
            var expandBottom = containerHeight - self.h;

            // if container is whole inside a SafeFrame, it will not expand
            if(expandBottom < 0) return;

            config.b = expandBottom;
            $sf.ext.expand(config);
        }

        function expandDelayed(forceExpand) {
            // expand will run just once, or you can force it to run again
            // but collapse first is needed
            if(expanded && forceExpand || !expanded) {
                $sf.ext.collapse();
                expanded = false;
                // there must be some timeout, because .collapse(); method is deplayed somehow
                setTimeout(expand, 0);
            }
        }

        $sf.ext.register(160, 150, function(status, data) {
            // this code will do whole magic of "waiting" for right moment
            if (status === 'geom-update') {
                expandDelayed();
            }

            // change global expanded status
            if (status === 'expanded') {
                expanded = true;
            }
        });

        // init
        expandDelayed();
    </script>
</div>

hope it helps!

edit:

I found better solution here: Unable to access contents of a safeframe returned by Google adx

来源：https://stackoverflow.com/questions/38849451/is-there-a-way-to-expand-an-advert-outside-of-the-window-width-within-a-gpt-goo