Javascript 我希望从文本区域获得的html在浏览器中运行'；这是新的标签，可能吗？_Javascript_Vue.js

Javascript 我希望从文本区域获得的html在浏览器中运行'；这是新的标签，可能吗？

javascript vue.js

Javascript 我希望从文本区域获得的html在浏览器中运行'；这是新的标签，可能吗？,javascript,vue.js,Javascript,Vue.js,我可以在新选项卡的变量中运行html吗例如：我希望从文本区域获得的html在浏览器的新选项卡中运行。可能吗 $('body').on('click', '.excute_html_button', function (e) { const id = this.id; const html = $("#title-area-"+id).val() // is it possible? // new tab open and execute html });

我可以在新选项卡的变量中运行html吗

例如：

我希望从文本区域获得的html在浏览器的新选项卡中运行。可能吗

$('body').on('click', '.excute_html_button', function (e) {
    const id = this.id;
    const html = $("#title-area-"+id).val()

    // is it possible?
    // new tab open and execute html
});

香草JS或jQuery

html vue代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Getting Started</title>
  </head>
  <body>
    <div id="app">
      {{ message }}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js'
        }
      })
    </script>
  </body>
</html>


开始
{{message}}
新Vue({
el:“#应用程序”，
数据：{
消息：“你好，Vue.js”
}
})

你告诉了我答案，但我仍然有一个问题^ ^

vue代码 html按原样输出是一个问题。 {{text}}

也许是因为代码在体内运行

有办法解决此问题吗？

您可以使用

窗口打开一个新窗口或选项卡。打开，保存对已打开窗口的引用，然后分配给其文档的innerHTML
：
$('body').on('click', '.excute_html_button', function (e) {
    const id = this.id;
    const html = $("#title-area-"+id).val()
    const w = window.open();
    w.document.body.innerHTML = html;
});

用户可能有弹出窗口拦截器，在这种情况下，您需要首先检查窗口是否存在，如果无法打开，则向用户显示一条消息：
$('body').on('click', '.excute_html_button', function (e) {
    const id = this.id;
    const html = $("#title-area-"+id).val()
    const w = window.open();
    if (!w) {
      console.error("Window couldn't be opened, please permit popups from this site for full functionality");
      // or put the above message into an HTML element
      return;
    }
    w.document.body.innerHTML = html;
});

这可能会打开一个新选项卡，也可能会打开一个新窗口IIRC，这取决于用户的浏览器设置，Javascript无法在两者之间进行选择
要包含Javascript和Vue，您将无法通过更改innerHTML
来执行脚本。相反，您必须使用document.createElement（'script'）
插入
标记-首先插入Vue，等待加载，然后插入新的脚本标记以及调用它的其他Javascript：
const w = window.open();
const html = `<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">

  <pre>{{ $data }}</pre>
</div>`;
w.document.body.innerHTML = html;
const script = w.document.body.appendChild(w.document.createElement('script'));
script.src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js";
script.onload = () => {
  w.document.body.appendChild(w.document.createElement('script')).textContent = `
  var app = new Vue({
    el: '#app',
    data: {
      disabled: 0,
    },
  });`;
};

const w=window.open（）；
常量html=`
切换启用
{{$data}}
`;
w、 document.body.innerHTML=html；
const script=w.document.body.appendChild（w.document.createElement（'script'）；
script.src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js";
script.onload=（）=>{
w、 document.body.appendChild（w.document.createElement（'script'））。textContent=`
var app=新的Vue({
el:“#应用程序”，
数据：{
已禁用：0，
},
});`;
};

例如：
您可以使用窗口打开一个新窗口或选项卡。打开，保存对已打开窗口的引用，然后分配给其文档的innerHTML
：
$('body').on('click', '.excute_html_button', function (e) {
    const id = this.id;
    const html = $("#title-area-"+id).val()
    const w = window.open();
    w.document.body.innerHTML = html;
});

用户可能有弹出窗口拦截器，在这种情况下，您需要首先检查窗口是否存在，如果无法打开，则向用户显示一条消息：
$('body').on('click', '.excute_html_button', function (e) {
    const id = this.id;
    const html = $("#title-area-"+id).val()
    const w = window.open();
    if (!w) {
      console.error("Window couldn't be opened, please permit popups from this site for full functionality");
      // or put the above message into an HTML element
      return;
    }
    w.document.body.innerHTML = html;
});

这可能会打开一个新选项卡，也可能会打开一个新窗口IIRC，这取决于用户的浏览器设置，Javascript无法在两者之间进行选择
要包含Javascript和Vue，您将无法通过更改innerHTML
来执行脚本。相反，您必须使用document.createElement（'script'）
插入
标记-首先插入Vue，等待加载，然后插入新的脚本标记以及调用它的其他Javascript：
const w = window.open();
const html = `<div id="app">
  <button @click="disabled = (disabled + 1) % 2">Toggle Enable</button>
  <input type="text" :disabled="disabled == 1">

  <pre>{{ $data }}</pre>
</div>`;
w.document.body.innerHTML = html;
const script = w.document.body.appendChild(w.document.createElement('script'));
script.src = "https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js";
script.onload = () => {
  w.document.body.appendChild(w.document.createElement('script')).textContent = `
  var app = new Vue({
    el: '#app',
    data: {
      disabled: 0,
    },
  });`;
};

const w=window.open（）；
常量html=`
切换启用
{{$data}}
`;
w、 document.body.innerHTML=html；
const script=w.document.body.appendChild（w.document.createElement（'script'）；
script.src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js";
script.onload=（）=>{
w、 document.body.appendChild（w.document.createElement（'script'））。textContent=`
var app=新的Vue({
el:“#应用程序”，
数据：{
已禁用：0，
},
});`;
};

例如：
但是，对于vue代码，将打印{{mytext}}。有办法解决此问题吗？您必须（1）加载Vue库：w.document.body.appendChild（w.document.createElement（'script'））。src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js“
和（2）在新窗口w.document.body.appendChild（w.document.createElement（'script'））内调用new Vue
）.textContent='新Vue({…'
感谢您提供了一定的性能，但是有必要在vue html中手动配置vue实例吗？还有其他方法吗？我想要一次^^；请参见编辑，如果您也想运行脚本，您不能使用。innerHTML
，您必须显式地创建脚本元素，而不是标题。这对我来说有点困难，但我会马上尝试谢谢你的完美回答。但是，在vue代码的情况下，{{mytext}}会被打印出来。有没有办法解决这个问题？你必须（1）加载vue库：w.document.body.appendChild（w.document.createElement（'script'））.src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js“
和（2）在新窗口w.document.body.appendChild（w.document.createElement（'script'））内调用new Vue
({…'
感谢您提供了一定的性能，但是有必要在vue html中手动配置vue实例吗？还有其他方法吗？我想要一次^^；请参见编辑，如果您也想运行脚本，您不能使用。innerHTML
，您必须显式地创建脚本元素，而不是标题。这对我来说有点困难，但我会马上尝试谢谢你的完美回答