Render Component in iframe using vuejs without src attribute

后端未结

关注

 4  980

灰色年华 2021-02-14 23:25



</ifrme>
</code></pre>

<p>I want to render component in this iframe. Is there any option of creating h         
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5408099190056760"
     data-ad-slot="7305827575"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>        </div>
      </div>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>4条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                    <li data-id="111" class="jieda-daan">
            <a name="item-1111111111"></a>
            <div class="detail-about detail-about-reply">
                         <a class="fly-avatar" href="">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000054.jpg" alt=" 北荒 ">
              </a>
              <div class="fly-detail-user">
                <a href="" class="fly-link">
                  <cite> 北荒</cite>
                                             
                </a>
                
                <span>(楼主)</span>
            
              </div>              <div class="detail-hits">
                <span>2021-02-15 00:16</span>
              </div>

            </div>
            <div class="detail-body jieda-body photos">
              <p>          
<p>I've tried and haven't found a way to mount vue directly on <code>#iframe</code>.</p>

<p>Yet, you can add <code>div</code> to <code>#iframe</code> and mount to that:</p>

<pre><code>// create iframe element
var iframe = document.createElement('iframe')
iframe.id = 'iframe'
// place iframe inside page html
document.documentElement.insertBefore(iframe, document.querySelector('html').firstChild)

// append div to iframe
var container = document.createElement('div')
container.id = 'container'
iframe.contentWindow.document.body.appendChild(container)

// render vue component inside iframe on #container
new Vue({
el: container,
render: h => h(component)
})
</code></pre>

<p><em>Result:</em></p>

<pre><code><html>
  <iframe id="iframe">
    #document
    <html>
      <head>
      </head>
      <body><!-- <-- here was <div id="container"></div> -->
        <div class="message" style="color: orange;">Hello from Vue component!</div>
      </body>
    </html>

P.s. I've used this code in chrome extension content scripts (javascript injected into pages). If you're going to use it elsewhere make sure not to break Same-origin policy.

0 讨论(0)

查看其它4个回答