相关疑难解决方法(0)
稍后动态插入Javascript：如何让它运行？
我的 React 应用程序中有脚本，稍后会动态插入。脚本不加载。
\n在我的数据库中有一个名为 的字段content，其中包含包含 html 和 javascript 的数据。有很多记录，每个记录可以包含该content字段中的多个脚本。因此，在我的 React 应用程序中静态指定每个脚本 URL 并不是真正的选项。例如，记录的字段可能如下所示：
<p>Some text and html</p>\n<div id="xxx_hype_container">\n <script type="text/javascript" charset="utf-8" src="https://example.com/uploads/hype_generated_script.js?499892"></script>\n</div>\n<div style="display: none;" aria-hidden="true"> \n<div>Some text.</div> \nEtc\xe2\x80\xa6\n我使用以下命令在我的 React 应用程序中调用此字段dangerouslySetInnerHTML：
render() {\n return (\n <div data-page="clarifies">\n <div className="container">\n <div dangerouslySetInnerHTML={{ __html: post.content }} />\n ... some other data\n </div>\n </div>\n );\n}\n它正确地从数据库加载数据并显示该数据的 html。但是，Javascript 不会被执行。我认为该脚本不起作用，因为它是稍后动态插入的。我怎样才能让这些脚本工作/运行？
\n这篇文章提出了动态插入脚本的解决方案，但我不认为我可以应用此解决方案，因为在我的情况下，脚本/代码是从数据库插入的（那么如何在nodeScriptReplace代码上使用...？）。有什么建议可以让我的脚本发挥作用吗？
\n
更新回应 @lissettdm 他们的答案：
\nconstructor(props) …推荐指数
解决办法
查看次数
twitter小部件只在webapp ajax页面中第一次加载？
我试图在我的ajax加载页面中加载twitter小部件api.
我尝试以几种不同的方式加载脚本,我每次都会运行警报而不是脚本本身.
所以我第一次加载页面,然后脚本工作,但如果我回到菜单并返回到此页面,那么它不加载它？
这是ajax加载的页面.
<div id="twitterwid">
<a class="twitter-timeline" width="320" height="500" href="https://twitter.com/my account" data-widget-id="my widget id number">Loading tweets by @me</a>
<script>
alert("alert is working");
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
<div>
任何意见,谢谢.
推荐指数
解决办法
查看次数
如何在v-html中运行脚本
我从数据库获取嵌入代码（Instagram、Twitter 等）。如何将它们绑定到 vue 组件？有没有办法在v-html中执行脚本标签？
推荐指数
解决办法
查看次数
如何使用 fetch api 及其 javascript 加载 html 页面？
我正在尝试使用 fetch API 加载 HTML 页面及其 JavaScript 脚本
我可以使用 ajax 和 JQuery请参阅此处来加载页面，但是可以使用 fetch API 吗？
这是代码演示：
我假设你在本地主机上运行这个
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>fetch API</title>
</head>
<body>
<p>index page</p>
<div id="content">
</div>
<script>
fetch('./page.html')
.then(data => data.text())
.then(html => document.getElementById('content').innerHTML = html);
</script>
</body>
</html>
要加载的页面：
<!-- page.html -->
<p> i am the loaded page</p>
<script type="text/javascript">
alert("Javascript is working");
</script>
该
<p>标签I am the loaded page将运行，但<script>不会alert运行或任何类型的 JavaScript
推荐指数
解决办法
查看次数
将脚本传递给innerHTML
在您将其标记为重复,我已经看了看这里,还有,这里太,但我似乎无法找到一个有效的解决方案.据我所知,由于脚本标记,我无法将脚本传递给innerHTML.但有没有办法将这个特定的API推入div而不将其放在HTML页面上.我有一个输入输入并运行几个$ .get以获取股票信息的按钮,所以我想将其作为结果的一部分包含在内,但是,不允许使用innerHTML,并且我尝试了许多解决方案.上面的链接,无济于事.
我可以将下面的脚本放在HTML页面上的div中,但我不想这样做,而且我需要获取用户输入,因此将它放在我的.js中将更容易一起执行所有功能.我有小部件的js包括在内.
<script type="text/javascript">
new TradingView.widget({
"width": 480,
"height": 400,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "White",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"hide_top_toolbar": true,
"save_image": false,
"hideideas": true
});
</script>
到目前为止我有
var script = document.createElement('script');
script[(script.innerText===undefined?"textContent":"innerText")] = "new TradingView.widget({ 'width': 580, 'height': 400, 'symbol': 'NASDAQ:"+ticker+ "','interval': 'D','timezone': 'Etc/UTC','theme': 'White','style': '1','locale': 'en','toolbar_bg': '#f1f3f6','enable_publishing': false,'hide_top_toolbar': true,'save_image': false,'hideideas': true});";
document.getElementById("stockChart").appendChild(script);
然而,这项工作,但不是我想要它,但这只是执行该脚本,这个图表是唯一显示在页面上的东西,有没有办法可以强制它在<div>？使用上面的解决方案,脚本被执行,但没有将小部件放在div中(看起来,我可能是错的.我对此并不精通).
在此图像中,当我使用JS文件与其他操作一起运行脚本时,它只是在页面上显示图形.
这是当代码在div中并且在运行任何JS函数之前,我猜它在div中,但是,我需要在框中放置一个输入,这样所有信息都可以显示在一个页面上,如下所示
我想在图形上的红点的地方,那里的<div>是
HTML
<div id="content">
<img …推荐指数
解决办法
查看次数
用里面的脚本设置innerHTML
如果我在任何页面上运行Firebug中的以下行:
document.documentElement.innerHTML="<script>alert(1)</script>";
为什么不alert执行命令？
推荐指数
解决办法
查看次数
在ajax中包含php文件时,Javascript无法正常工作
我有一个下拉选择列表和一个按钮,我在其中插入了一个onclick事件,这样每当有人点击该按钮时,它将调用一个基本上包含ajax的函数,当执行它时将包含一个php文件.在我的php文件中,它从所选的下拉列表中获取值,然后它将显示一个警告选项,但它不显示任何警报.
以下是我的代码: -
<html>
<head>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","user.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users1" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will …推荐指数
解决办法
查看次数
使用Angular 2在受信任的HTML中运行脚本
我有什么
我正在使用Angular 2构建个人博客应用。我的JSON文件中包含博客文章，该文件由服务器提供。
// Single post route
apiRouter.route("/post/:id")
// Get a specific post
.get((req: express.Request, res: express.Response) => {
let post = blogData.posts.find(post => post.date === Number(req.params.id));
res.json(post);
})
);
JSON博客数据文件中的各个条目如下所示：
"posts": [
{
"title": "Some Post's Title",
"body": "Some post's body.",
"date": 1481582451092,
"headerImageName": ""
},
{ ... }, ...
]
在我的Web应用程序中，我希望有一个“博客帖子”打字稿组件，当访客在映射到单个帖子的路线上时显示一个单独的帖子。
我定义了一个简单的post数据类，如下所示：
export class PostData {
body: string;
date: number;
imageFileName: string;
title: string;
}
显示帖子正文时，我将其通过此管道传递：
@Pipe({
name: "trustPipe"
})
export class TrustPipe implements PipeTransform {
constructor(@Inject(DomSanitizer) private …推荐指数
解决办法
查看次数
从输出中删除<script>标记
我正在构建一个tumblr主题并且有一个ajax调用,它可以获得一个视频播放器,视频播放器代码被返回,我将它登录到控制台(参见#1).我将返回的html写出一个元素(#2),然后写出该元素的内容(#3),并解析出标签.
任何人都可以帮助我理解为什么脚本标签被剥离以及我将如何让脚本运行吗？
console.log(data.posts[0]["video-player"]); //#1
$("#DOMWindow .post-inner .video-container").html(data.posts[0]["video-player"]); //#2
$("#DOMWindow .post-inner .video-container").html(); //#3
以下是控制台中data.posts [0] ["video-player"]的输出
<span id="video_player_21019988413">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 10</a> is required to watch video.]</span><script type="text/javascript">renderVideo("video_player_21019988413",'http://penguinenglishlibrary.tumblr.com/video_file/21019988413/tumblr_m2f2kbQFzu1rsq78z',400,225,'poster=http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame1.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame2.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame3.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame4.jpg,http%3A%2F%2Fmedia.tumblr.com%2Ftumblr_m2f2kbQFzu1rsq78z_r1_frame5.jpg')</script>
下面是.html()调用的输出,其元素被剥离#3
<span id="video_player_21019988413">[<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" target="_blank">Flash 10</a> is required to watch video.]</span>"
下面是应该将脚本标记插入页面的完整ajax调用,但不是:
$.ajax({
url: 'http://penguinenglishlibrary.tumblr.com/api/read/json?id=' + audioID,
dataType: 'jsonp',
timeout: 50000,
success: function(data){
var videoPlayer = data.posts[0]["video-player"];
$("#DOMWindow").find(".post-inner .video-container").html(videoPlayer);
}
});
推荐指数
解决办法
查看次数
将外部 HTML 和 JS 注入页面
我正在尝试构建一些小部件工具，网站管理员可以将其嵌入到他们的网站中。
有没有什么方法可以让网站管理员通过包含这样的脚本来简单地加载这个工具？
<script src="http://mysite/widget.js"></script>
我试图通过在 AJAX 中加载它来注入它，然后appendChild()在身体上做一个，它是这样工作的，但没有执行 JS。
注入内容：
<div>one div</div>
<script>alert('some js')</script>
小部件.js
function load(content) {
var $body = document.body,
$div = document.createElement("div");
$div.id = "widget";
$div.innerHTML = content;
$body.appendChild($div);
}
content 变量包含 HTML 和 JS，但注入时不执行 JS。
推荐指数
解决办法
查看次数